响应式布局，height占满剩余空间，不要有滚动条

目录

由一道题引发的思考

问题一：为什么在 #div1 上直接 height:100%，不生效？

问题二：为什么设置了 height : 100%，会有纵向滚动条的出现？

---

由一道题引发的思考

面试中遇到的，查了后发现是挺麻烦的。今天重新做了下，整理一下遗漏的知识点：

基本样式

<div>
    <p>1.两个div平分灰色的空间</p>
    <p>2.灰色的div占满剩余空间，不要有滚动条</p>
</div>
<div id="div1" style="background:gray; width:100%; height:100%;">
    <div id="div2" style="background: red; width:100%;">div1</div>
    <div id="div3" style="background: green; width:100%;">div2</div>
</div>