所以,我认为这将是一个非常简单的过程,但它似乎不是,我现在真的很困惑!场景如下:
我有一个父 div,在那个 div 里面还有 3 个 div,顶部的 Div 是 X 像素高 100% 宽度,底部的 div 是 Z 像素高 100% 宽度,我需要中间的 div 作为剩余部分顶部和底部 div 之间始终保持高度(中间 div 的内容可以扩展到 div 边界之外,因此我需要能够在其中放置一个滚动条)并且父 div 可以调整大小。
我以为我可以很容易地解决这个问题,但事实并非如此!任何关于我如何实现这一目标的建议将不胜感激,因为我根本无法让它工作!
最佳答案
flexbox
进行救援。
.parent{
display: flex;
flex-direction: column;
height: 700px;
}
.one{
height: 100px;
background: red;
}
.two{
height: 50px;
background: green;
overflow-y: scroll;
}
.three{
height: 100%;
background: blue;
}
<div class="parent">
<div class="one">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
<div class="two">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
<div class="three">
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
<p>content</p>
</div>
</div>
关于html - 使用CSS在父div中组织兄弟div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41966752/