CSS只滚动三个中间元素

Question

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

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

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

另外，当内容不适合时，我想让中间的一个滚动。

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

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

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

如何实现这种定位方案？

编辑：这是一个小提琴，可以给你一个想法：

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

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

Answer 1

您可以使用 Flexbox 执行此操作：

 int ret, ans, key;
 while ((ret = fscanf(fp, "%x %i", &key, &ans))) {
    if (ret == EOF)
        break;
    else
        printf("%x %i \n",key, ans);
 }

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> div 与#middle或flex-grow: 1（简写）保持灵活。

Answer 2

我不确定我是否正确理解，但如果您只想让红色始终位于顶部，则绿色滚动，蓝色始终位于底部而不会使绿色重叠可以简单地删除

position:absolute;

来自#bottom CSS的

。

像这样：

#bottom {
  background-color: #CCF;
  bottom: 0px;
  right: 0px;
  left: 0px;
}