Question

我有一个CSS布局，其中内容div具有绝对定位，以便在溢出时滚动内容。此内容div位于相对div内，因为上面的元素高度可能不同（由内容决定）。

但是，我的解决方案仅适用于Chrome和IE9，内容div不会在Firefox中显示滚动条。不幸的是，我的解决方案在旧版浏览器中也不起作用。你知道一个更好的布局来完成上述要求吗？

修改

布局应该填充视口100％宽度和100％高度，这就是为什么我可能需要使用表格（如果我错了请纠正我）。此外，我更喜欢没有javascript的解决方案，因为我还有其他可以操作内容的javascripts。

我目前的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>Test</title>
    <style type="text/css">
        html, body, form { width:100%; height:100%; margin:0; overflow:hidden; }
    </style>
</head>
<body>
    <table style="width: 100%; height: 100%;">
        <tr>
            <td style="height: 120px; border: 1px solid #000;">
                Top: always same height
            </td>
        </tr>
        <tr style="height: 20px; background-color: Red;">
            <td>
                Variable height: could push the next row down
            </td>
        </tr>
        <tr style="position: relative; overflow: auto;">
            <td style="position: relative; background-color: White; vertical-align: top; overflow: scroll;">
                <div style="position: relative;">
                <div style="position: absolute; bottom: 0; top: 0; left: 0; right: 0; ">
                Content with variable height: needs overflow auto/scroll
                </div>
                </div>
            </td>
        </tr>
    </table>
</body>
</html>

Answer 1

我无法弄清楚如何只使用css，但我可以使用javascript。

HTML（体内）：

<div id='top'>
    top - fixed height
</div>
<div id='middle'>
    middle - some content and stuff
</div>
<div id='bottom'>
    bottom - this content should scroll<br/>
    text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>
    text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>
    text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>text!<br/>
</div>

CSS：

body{
    margin:0;
    padding:0;
}

#top{
    width:100%;
    height:100px;
    background:#ccf;
}

#middle{
    float:left;
    width:100%;
    background:#cfc;
}


#bottom{
    width:100%;
    background:#fcc;
    clear:both;
    overflow:scroll;
    position:fixed;
    bottom:0;
}

JavaScript（放在头脑中）：

function getDocHeight() {
    var D = document;
    return Math.max(
    Math.max(D.body.scrollHeight, D.documentElement.scrollHeight), Math.max(D.body.offsetHeight, D.documentElement.offsetHeight), Math.max(D.body.clientHeight, D.documentElement.clientHeight));
}

window.onload = function() {
    document.getElementById('bottom').style.height = getDocHeight() - (100 + document.getElementById('middle').offsetHeight) + "px";
}

window.onresize=window.onload;

getDocHeight()功能来自此处：http://james.padolsey.com/javascript/get-document-height-cross-browser/

在相对div内推下绝对溢出div

1 个答案: