为什么高度:100% 无法扩展到 divs 的屏幕高度?


要将高度设置为 100% 以将 div 扩展到屏幕高度,请将整个文档设置为 -

html {
   height: 100%;
}

首先,我们将 html 和 body 都设置为 -

html, body {
   height: 100%;
}

div 被设置为 height 和 min-height 属性 -

#mydiv {
   min-height: 100% !important;
   height: 100%;
   border: 2px solid yellow;
   width: 200px;
   background: orange;
}

在 <body> 下,我们有用于设置上述 CSS 属性的 div -

<div id=mydiv>
   Demo Text
</div>

示例

现在让我们看完整的示例 -

<html>
<head>
    <title>Example</title>
    <style>
      html, body {
         height: 100%;
      }  
      #mydiv {
         min-height: 100% !important;
         height: 100%;
         border: 2px solid yellow;
         width: 200px;
         background: orange;
      }
   </style>
</head>
<body>
   <div id=mydiv>
      Demo Text
   </div>
</body>
</html>

输出

最后更新时间:2022 年 12 月 6 日

156 次观看

开启你的 职业生涯

完成课程获得认证

开始使用
广告
© . All rights reserved.