Question

所以，我认为这将是一个非常简单的过程，但它似乎不会，我现在真的很难过！这是场景：

我有一个父div，里面的div是3个div，顶部Div是X像素高100％宽度，底部div是Z像素高100％宽度，我需要中间div是剩余在顶部和底部div之间保持高度（中间div的内容可以扩展到div边界之外，所以我需要能够在其中放置一个滚动条）并且父div可以调整大小。

我以为我能够很容易地解决这个问题，但看起来并非如此！关于如何实现这一点的任何建议都将非常感激，因为我无法让它完全发挥作用！

Answer 1

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>

使用css在父div中组织兄弟div

1 个答案: