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

【问题标题】：Pushing down absolute overflow div within relative div在相对 div 内下推绝对溢出 div
【发布时间】：2011-07-20 19:31:37
【问题描述】：

我有一个 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>

【问题讨论】：

如果您需要滚动，为什么要使用overflow:hidden？
溢出：隐藏，因为我只想滚动内容 div，而不是整个页面。我想我需要表格，因为它应该填满整个视口。在这种情况下这似乎不起作用（如果我错了，请纠正我）。

标签： html css css-position

【解决方案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/

【讨论】：