div设置百分百高度实现

最新推荐文章于 2024-05-30 22:05:48 发布

原创最新推荐文章于 2024-05-30 22:05:48 发布 · 3.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css

前端同时被 3 个专栏收录

80 篇文章

订阅专栏

css

47 篇文章

订阅专栏

html

28 篇文章

订阅专栏

    在html布局中body内第一个div盒子对象设置100%高度height样式，是无法成功显示100%高度的。这个是因为body高度默认值为自适应的，所以及时设置body第一个布局div高度为百分比也是无效的，因为div解析上级高度为0，自然div height 100%实际高度也为0。

浏览器根本就不计算内容的高度，除非内容超出了视窗范围(导致滚动条出现)。或者你给整个页面设置一个绝对高度。否则，浏览器就会简单的让内容往下堆砌，页面的高度根本就无需考虑。
因为页面并没有缺省的高度值，所以，当你让一个元素的高度设定为百分比高度时，无法根据获取父元素的高度，也就无法计算自己的高度。换句话说，父元素的高度只是一个缺省值：height: auto;。当你要求浏览器根据这样一个缺省值来计算百分比高度时，只能得到undefined的结果。也就是一个null值，浏览器不会对这个值有任何的反应。
如果想让一个元素的百分比css高度height: 100%;起作用，你需要给这个元素的所有父元素的高度设定一个有效值。

 <!DOCTYPE html>
 <html lang="en">
  <head>
      <meta charset="UTF-8">
      <title>成功设置100%高度</title>
      <style type="text/css">
         html,body{
              height: 100%;
          }
     </style>
 </head>
 <body>
 <div style="height: 100%;background-color: #4d85d1">
     所在div设置高度100%
 </div>
 </body>
  </html>