为什么 height: 100% 无法将 div 扩展到屏幕高度?

htmlweb developmentfront end technology更新于 2024/7/19 11:24:17

要将高度设置为 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> 下，我们有 div，我们为其设置了上面的 CSS 属性 -

<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>