如何在一定大小后强制div滚动?

时间:2015-01-25 01:05:47

标签: html css

小提琴

这个小提琴清楚地解释了这个问题: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。)

3 个答案:

答案 0 :(得分:1)

这是一种使用flexbox进行布局的方法:

Example Here

将父display元素的#container设置为flex。由于您希望元素垂直堆叠,请将flex-direction属性的值设置为columnjustify-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);
}