假设我有一些像这样的 div:
<div id="div0">
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</div>
div0、div1 和div3 的高度是固定的。现在我想让 div2 自动扩展,以便它可以占用所有剩余空间。有没有办法做到这一点? 看这个http://codepen.io/anon/pen/XJorMb例如,我希望蓝色框位于中间并占据所有剩余空间。
最佳答案
你可以用 flex
做到这一点:
#fixedPanel {
position:fixed;
width: 350px;
height:150px;
border-style: solid;
border-width: 5px;
display:flex;
flex-direction:column;
}
#div1 {
height: 20px;
border-style: solid;
border-width: 1px;
border-color: red;
}
#div2 {
flex:1;
border-style: solid;
border-width: 1px;
border-color: blue;
}
#div3 {
height: 20px;
border-style: solid;
border-width: 1px;
border-color: green;
}
<div id="fixedPanel">
<div id="div1"> 1 </div>
<div id="div2"> 2 </div>
<div id="div3"> 3 </div>
</div>
或display:table;
#fixedPanel {
position:fixed;
width: 350px;
height:150px;
border-style: solid;
border-width: 5px;
display:table;
border-collapse:collapse;
}
#fixedPanel > div {
display:table-row;
}
#div1 {
height: 20px;
border-style: solid;
border-width: 1px;
border-color: red;
}
#div2 {
height:100%;
border-style: solid;
border-width: 1px;
border-color: blue;
}
#div3 {
height: 20px;
border-style: solid;
border-width: 1px;
border-color: green;
}
<div id="fixedPanel">
<div id="div1"> 1 </div>
<div id="div2"> 2 </div>
<div id="div3"> 3 </div>
</div>
关于html - 如何设置嵌套的几个div的相对位置?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29134411/