CSS 溢出框高度 100%

Question

如何使这个“滚动框”适合内容和标题: http://jsfiddle.net/LDXhf/5/

(如果它能在 IE6 上运行则加分)

CSS:

#main {
    position: relative;
    height: 200px;
    background-color: yellow;
}

#header {
    background-color: blue;
    text-align: center;
}

#footer {
    position : absolute;
    bottom : 0;
    left: 0;
    width: 100%;
    background-color: blue;
    text-align: center;
}

#content {
    background-color: white;
}

#scrollbox {
    background-color: red;
    overflow: auto;
    height: 100%;
}

HTML:

<div id="main">
    <div id="header">
       HEADER
    </div>

    <div id="content">
        CONTENT
    </div>

    <div id="footer">
        FOOTER
    </div>

    <div id="scrollbox">
        DATA1<br/>
        DATA2<br/>
        DATA3<br/>
        DATA4<br/>
        DATA5<br/>
        DATA6<br/>
        DATA7<br/>
        DATA8<br/>
        DATA9<br/>
        DATA10<br/>
        DATA11<br/>
        DATA12<br/>
        DATA13<br/>
        DATA14<br/>
    </div>
</div>

Answer 1

您需要为 #scrollbox 指定一个固定的高度，使其适合两者之间。

在 fiddle 中，你有一个固定的高度，所以可以知道 scollbox 的高度。

但是，如果不使用百分比或 flexbox，CSS 就无法知道需要的高度，因此使用可调整高度会遇到问题。

我最近为另一个对您有用的问题制作了以下演示:

http://codepen.io/helion3/details/FAElH

诀窍是使用位于页眉/页脚边缘的包装器，然后允许内部内容具有 height: 100%，这样浏览器将正确地自动调整内容高度。