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一个固定的height，使其适合两者之间。

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

但是，如果高度可调，则会出现问题，因为如果不使用百分比或弹性框，CSS无法知道所需的高度。

我最近为另一个适合您的问题做了以下演示：

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

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

Answer 2

可能这不是最好的解决方案，但你可以使用这个技巧即。像这样在底部设置-ve值

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

<强> Js Fiddle Demo

CSS溢出盒高度100％

2 个答案: