使用position的容器与height 100%的
今天摸索了一下，发现了如下问题：
<style>
body{ height: 2000px; padding: 0; margin: 0;}
.left-box{ width: 200px; background-color: darkseagreen;
position: fixed; height: 100%;}
</style>
<body>
<div class="left-box"></div>
</body>
RT，请问为什么div.leftbox高度是以浏览器窗口高度为依据来实现100%，而非body？
另外，假如把div.leftbox设成position: fixed;的时候，body的height设成2000px，它能够铺满2000px；
但是body的height设成2px，它也能使得div.leftbox铺满整个窗口
有大神了解过这三种情况都说说吗？或者链接也行，感激不尽！
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
其实这3个问题都是一个原理.
首先,你应该需要了解position:fixed这个属性吧.
通俗的说,fixed会使元素脱离整个html文档流,跟任何元素都没有关系了.所以,.left-box的高度就跟它的父元素没有关系了.然后你设置height:100%;就是让div.leftbox充满整个浏览器了(也就是全屏).
所以就造成了你无论怎么改变body的height,然后这个div依然充满你的屏幕的错觉.
你可以给body一个background-color:red;看看body在哪 你的div又在哪.