本文探讨了在不使用position:absolute的情况下，如何通过CSS设置使div元素充满整个屏幕。关键在于确保html和body元素的height设置为100%，从而使div的height:100%生效。当body的height未明确设定时，百分比高度会被重置为auto，导致div无法全屏。解决方法是添加html和body的height:100%样式，确保div的尺寸与屏幕一致。
首先我们来看一个实际的问题，让body中的一个div占全屏。
#div1{
background:#ccc;
border:1px solid red;
width:100%;
height:100%;}
div1
运行后div1还是只占一行，height没有到达全屏。
当然，我们以前用过一种方法，就是使用position:absolute,设置top:0,bottom;0这样元素的尺寸就会根据偏移来推断了。
不改变position,怎么达到要求呢？
增加一句；
html,body{
height:100%;
width:100%;
}
就可以了。
html,body{
height:100%;
width:100%;
}
div{
width:100%;
height:100%;
}
为什么这个可以将div的尺寸变成屏幕一样大。、
看下面的例子，我们没有设置body的width和height。
html{
height:100%;
width:100%;
}
#div1{
background:#ccc;
width:100%;
height:100%;
}
window.οnlοad=function(){alert(document.body.clientHeight); };
div1
显示是，div1背景还是只有一行。说明height:100%
javascript函数输出:18。这说明，我们没有定义body的height，但由于里面有内容，把里面的内容包起来的最小高度为18px，
由于body是块元素，width没设置时更父元素的width一样，也就是html的width。
《css权威指南指出》height width百分数是相对于包含块的。在本例中，div1的height相对于body，但由于body没有设置
height，《css权威指南》又指出(P180)，如果没有显示声明包含块的height，百分数高度会重置为auto，所以上面div1height设置为任何值都跟设置没设置一样。包含块与div1高度完全相同。
所有出现了上面的情况。
(牢记：就是要设置div100%显示，必须设置其上一级div的宽度或高度，否则无效。)
所有html，body，div都要设置height为100%。虽然html默认的width和height一样，但是由于body设置的是100%，如果没有
显式设置html，body还是相当于没设置。
本文由职坐标整理发布，更多相关内容，请关注职坐标WEB前端HTML/CSS频道！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
