html - CSS 只滚动三个中间元素

Question

我试图在纯 CSS 中获得一个垂直布局，其中第一个元素始终位于顶部，第三个元素始终位于底部，第二个元素位于中间。

3个元素应100%填充其父元素的高度，不溢出，不重叠。

所有元素都可以改变它们的大小。所以我认为使用固定定位是不可行的，因为当底部元素扩展时，中间的元素应该相应地改变它的高度。

此外，当内容不适合时，我希望中间的滚动。

现在，我尝试了几种不同的方法但都没有成功:

• 当底部元素调整大小时，使用固定定位不会调整中间元素高度，
• 使用 flex 我无法让中间元素在它们溢出时滚动。

我最近发现了 sticky 定位，这看起来像是一个可能的用例，但我不确定如何。

如何实现这个定位方案？

编辑:这里有一个 fiddle 可以给你这个想法:

https://jsfiddle.net/f4scm02y/1/

我希望蓝色部分受到红色和绿色部分的约束，顶部和底部元素可以自由调整大小而不会导致重叠。

Answer 1

您可以使用 Flexbox 来做到这一点:

body {margin: 0}

#container {
  display: flex; /* displays flex-items (children) inline */
  flex-direction: column; /* stacks them vertically */
  height: 100vh; /* just for demo */
  background-color: #FFF;
}

#top {background-color: #FCC}

#middle {
  background-color: #CFC;
  overflow: auto; /* recommended */
  flex-grow: 1; /* grows and takes all the remaining vertical space */
}

#bottom {background-color: #CCF}

<div id="container">
  <div id="top">
    Top has variable height<br/>
    but usually rather short.
  </div>
  <div id="middle">
    Middle has variable height<br/>
    and usually it is pretty long.<br/>
    This content must be scrolled<br/>
    and it should expand as much<br/>
    as possible.<br/>
    Lorem ipsum dolor sit amet, consectetur<br/>
    adipiscing elit, sed do eiusmod tempor<br/>
    incididunt ut labore et dolore magna aliqua.<br/>
    Ut enim ad minim veniam, quis nostrud<br/>
    exercitation ullamco laboris nisi ut aliquip<br/>
    ex ea commodo consequat. Duis aute irure <br/>
    dolor in reprehenderit in voluptate velit<br/>
    esse cillum dolore eu fugiat nulla pariatur.<br/>
    Excepteur sint occaecat cupidatat non proident,<br/>
    sunt in culpa qui officia deserunt<br/>
    mollit anim id est laborum
          Middle has variable height<br/>
    and usually it is pretty long.<br/>
    This content must be scrolled<br/>
    and it should expand as much<br/>
    as possible.<br/>
    Lorem ipsum dolor sit amet, consectetur<br/>
    adipiscing elit, sed do eiusmod tempor<br/>
    incididunt ut labore et dolore magna aliqua.<br/>
    Ut enim ad minim veniam, quis nostrud<br/>
    exercitation ullamco laboris nisi ut aliquip<br/>
    ex ea commodo consequat. Duis aute irure <br/>
    dolor in reprehenderit in voluptate velit<br/>
    esse cillum dolore eu fugiat nulla pariatur.<br/>
    Excepteur sint occaecat cupidatat non proident,<br/>
    sunt in culpa qui officia deserunt<br/>
    mollit anim id est laborum
        Middle has variable height<br/>
    and usually it is pretty long.<br/>
    This content must be scrolled<br/>
    and it should expand as much<br/>
    as possible.<br/>
    Lorem ipsum dolor sit amet, consectetur<br/>
    adipiscing elit, sed do eiusmod tempor<br/>
    incididunt ut labore et dolore magna aliqua.<br/>
    Ut enim ad minim veniam, quis nostrud<br/>
    exercitation ullamco laboris nisi ut aliquip<br/>
    ex ea commodo consequat. Duis aute irure <br/>
    dolor in reprehenderit in voluptate velit<br/>
    esse cillum dolore eu fugiat nulla pariatur.<br/>
    Excepteur sint occaecat cupidatat non proident,<br/>
    sunt in culpa qui officia deserunt<br/>
    mollit anim id est laborum
          Middle has variable height<br/>
    and usually it is pretty long.<br/>
    This content must be scrolled<br/>
    and it should expand as much<br/>
    as possible.<br/>
    Lorem ipsum dolor sit amet, consectetur<br/>
    adipiscing elit, sed do eiusmod tempor<br/>
    incididunt ut labore et dolore magna aliqua.<br/>
    Ut enim ad minim veniam, quis nostrud<br/>
    exercitation ullamco laboris nisi ut aliquip<br/>
    ex ea commodo consequat. Duis aute irure <br/>
    dolor in reprehenderit in voluptate velit<br/>
    esse cillum dolore eu fugiat nulla pariatur.<br/>
    Excepteur sint occaecat cupidatat non proident,<br/>
    sunt in culpa qui officia deserunt<br/>
    mollit anim id est laborum
        Middle has variable height<br/>
    and usually it is pretty long.<br/>
    This content must be scrolled<br/>
    and it should expand as much<br/>
    as possible.<br/>
    Lorem ipsum dolor sit amet, consectetur<br/>
    adipiscing elit, sed do eiusmod tempor<br/>
    incididunt ut labore et dolore magna aliqua.<br/>
    Ut enim ad minim veniam, quis nostrud<br/>
    exercitation ullamco laboris nisi ut aliquip<br/>
    ex ea commodo consequat. Duis aute irure <br/>
    dolor in reprehenderit in voluptate velit<br/>
    esse cillum dolore eu fugiat nulla pariatur.<br/>
    Excepteur sint occaecat cupidatat non proident,<br/>
    sunt in culpa qui officia deserunt<br/>
    mollit anim id est laborum
          Middle has variable height<br/>
    and usually it is pretty long.<br/>
    This content must be scrolled<br/>
    and it should expand as much<br/>
    as possible.<br/>
    Lorem ipsum dolor sit amet, consectetur<br/>
    adipiscing elit, sed do eiusmod tempor<br/>
    incididunt ut labore et dolore magna aliqua.<br/>
    Ut enim ad minim veniam, quis nostrud<br/>
    exercitation ullamco laboris nisi ut aliquip<br/>
    ex ea commodo consequat. Duis aute irure <br/>
    dolor in reprehenderit in voluptate velit<br/>
    esse cillum dolore eu fugiat nulla pariatur.<br/>
    Excepteur sint occaecat cupidatat non proident,<br/>
    sunt in culpa qui officia deserunt<br/>
    mollit anim id est laborum
  </div>
  <div id="bottom">
    Bottom has variable height<br/>
    but usually rather short.
  </div>
</div>

诀窍是制作 #middle div 灵活 flex-grow: 1或者只是 flex: 1 (速记)。