為什麼高度：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 次觀看

開啟你的 職業生涯

完成課程獲得認證

開始使用
廣告