小提琴
这个小提琴清楚地解释了这个问题:fiddle(编辑:修复破碎的小提琴。)
问题
我有一个容器div,里面有3个div 顶部div和中间div的高度是动态的。底部div是固定的 一旦中间div扩展得足够多,我希望它可以滚动。
代码段
基本结构:
<div id='container'>
<div id='top'>Top (dynamic) content</div>
<div id='middle'>Middle (dynamic) content</div>
<div id='bottom'>Bottom (fixed) content</div>
</div>
基本CSS:
#container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 250px;
padding-bottom: 100px; /* bottom div height */
}
#top {
???
}
#middle {
???
}
#bottom {
position: absolute;
bottom: 0;
left: 0;
height: 100px;
}
问题
有没有办法使用 CSS 来实现这一目标? (通过只是 CSS,我的意思是没有JavaScript。)
答案 0 :(得分:1)
这是一种使用flexbox进行布局的方法:
将父display
元素的#container
设置为flex
。由于您希望元素垂直堆叠,请将flex-direction
属性的值设置为column
。 justify-content: space-between
用于在中间元素的高度减小时将最后一个元素定位在底部。
值得指出的是,vh
单位用于将父元素的高度设置为height of the viewport。
#container {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
}
我还将middles元素的flex-shrink
属性设置为相对任意的数字,以使其缩小。然后flex-basis: 100%
用于强制元素填充剩余空间。
#middle {
overflow-y: auto;
flex-shrink: 50;
flex-basis: 100%;
}
答案 1 :(得分:0)
是的,在#container上设置最大高度。您可能还需要摆弄溢出属性。首先将其设置为滚动。
答案 2 :(得分:0)
你可以做到
#middle {
overflow-y: auto; /* does nothing */
height: calc(100% - 100px);
}