html设置了div高度无效,div设置为height:100%不起作用，无法占满整个屏幕的解决办法...

假如我们想body里的div占满整个浏览器窗口，我们首先想到的是给div设置height:100%;宽度由于div是块元素，不需要设置就是100%的。于是我们有如下代码

*{margin:0; padding: 0;}

.mydiv{ height: 100%; background-color: #ccc; }

占满整个浏览器窗口

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

显示效果：

我们选中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; }

占满整个浏览器窗口

此时我们看效果：