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

来源：网络文章列表 2019-01-09 8

本文通过设置html根元素和body元素的高度，实现div容器占满整个浏览器窗口。

假如我们想body里的div占满整个浏览器窗口，我们首先想到的是给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>

代码很简单。那么我们看下显示的效果如何呢？

显示效果：

我们选中div，会发现

div的高度确实只有文字高度那么高。

那么如果你细心的话，你会发现，body此时的高度，也只有文字块那么高。

那么我们自然想到，我给body也加个高度等于100%吧。

于是我们加上body{height: 100%}

测试发现

好像也没啥卵用

那怎么办呢，其实我们离真相已经很近了。我们发现，html跟元素的高度也是文字块那么高。

原来浏览器默认的body，和html是没有高度的。或者说高度是auto的。

那么接近办法就是给body和html都设置高度为100%就可以了吧。

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

此时我们看效果：