我在主 div 中有 2 个 div divA 和 divB，
divA 位于顶部，就像标题停留在顶部一样，他有一个固定的高度。divB 是内容，应该占据直到底部的所有空间。
divA 的大小以像素为单位。divB 应该做 100% 的高度 - divA 大小
#container{
width:400px;
height:800px;
background-color:red;
position:relative;
overflow: scroll;
}
#options{
width:95%;
height:30px;
background: #734A6F;
position: relative;
color: #FFF;
line-height: 33px;
padding-left: 10px;
}
#buttons{
position:absolute;
width:95%;
height:100%;
background-color:blue;
}
<div id="container">
<div id="options">
</div>
<div id="buttons">
</div>
</div>
我不想隐藏滚动条所以请不要scroll:hidden在我的情况下蓝色 div 里面有东西，所以它会被切成两半并隐藏滚动条。使其正常工作的唯一方法是适合的蓝色 div
除非您正在寻找非常旧的浏览器支持，否则 CSS flexbox 使这变得非常容易。
display: flex; // use flexbox
flex-direction: column; // set flexbox to vertical
justify-content: flex-start; // start at the top
flex-basis: 30px; // how much height it takes up
flex: 2; // any number greater than 1 will cause it to fill the space
#container {
width: 400px;
height: 600px;
background: red;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
#options {
background: green;
flex-basis: 30px;
}
#buttons {
background: blue;
flex: 2;
}<div id="container">
<div id="options">
Div A
</div>
<div id="buttons">
Div B
</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句