您的当前位置:首页>全部文章>文章详情

div设置为height:100%不起作用,无法占满整个屏幕的解决办法

发表于:2022-03-07 23:40:33浏览:4890次TAG: #div #满屏

我相信很多朋友在做项目开发中都遇到过这样一个问题,就是在HTML页面里想把一个div的高度设为100%占满整个浏览器窗口,以此来自适应不同分辨率下的窗口,然后给该div设置了{height: 100%}。占满整个浏览器窗口,代码很简单,由于div是块元素,所以宽度是不需要设置就是100%的,所以代码如下:

<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style>
   *{margin:0; padding: 0;}
   .mydiv{ height: 100%; background-color: #ccc; }
  </style>
</head>
<body>
  <div class="mydiv">
    占满整个浏览器窗口
  </div>
</body>
</html>

那么我们看下显示的效果如何呢?显示效果:

浏览器F12,然后我们选中div,会发现div的高度并没有陈曼整个屏幕,而是只有文字高度那么高。

然后同时我们也发现body此时的高度,也只有文字块那么高,到底怎么回事?感觉不合逻辑啊。

那么我们现在给body也加个高度等于100%试试看吧,于是我们加上body{height: 100%},测试发现好像也没啥作用啊。

那怎么办呢?其实我们离真相已经很近了,我们发现html跟元素的高度也是文字块那么高。原来浏览器默认的body,和html是没有高度的。或者说高度是auto的。

那么解决的办法就是给body和html都设置高度为100%就可以了吧,代码写起:

*{margin:0; padding: 0;}
html, body{ height: 100%; } /* 给html,body都设置高度100% */
.mydiv{ height: 100%; background-color: #ccc; }

刷新页面,查看效果,占满整个浏览器窗口了。此时我们看效果:

最后总结一下:

我们需要理解浏览器是如何计算高度和宽度的。web浏览器在计算有效宽度时会考虑浏览器窗口的打开宽度。如果你不给宽度设定任何缺省值,那浏览器会自动将页面内容平铺填满整个横向宽度。

但是高度的计算方式就完全不一样了。事实上,浏览器不计算内容的高度,除非内容超出了视窗范围(出现滚动条)。或者你给整个页面设置一个绝对高度。否则,浏览器就会简单的然后内容往下堆砌,页面的高度也就不用考虑了。

因为页面没有缺省的高度值,所以,当设置百分百的高度时,无法根据父元素获取高度,也就无法设置绝对高度。换句话说,父元素的高度只是一个缺省值height:auto。只有子元素撑开父元素。

那么要解决这个问题其实很简单,即父元素的高度只是一个缺省值:height: auto;我们设置height:100%时,是要求浏览器根据这样一个缺省值来计算百分比高度时,只能得到undefined的结果。也就是一个null值,浏览器不会对这个值有任何的反应。给他的父元素一个高度参数,这样问题就问没解决了。自适应的高度百分百就完成了。