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

发布于 2024-11-24 20:22:42 字数 1623 浏览 0 评论 0原文

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

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

编辑：

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

我当前的代码：

<!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>

原文

I have a CSS layout in which a content div has absolute positioning to be able to scroll the content in case of overflow. This content div is positioned within a relative div, since elements above may differ in height (which is decided by their content).

However, my solution only works in Chrome and IE9, the content div doesn't show a scrollbar in Firefox. And unfortunately my solution also doesn't work in older browsers. Do you know a better layout to accomplish the above requirements?

Edit:

The layout should fill the viewport 100% width and 100% height, that's why I probably need to use tables (please correct me if I'm wrong). Also, I prefer a solution without javascript, since I have other javascripts which could manipulate the contents.

My current code:

<!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

审判长 2024-12-01 20:22:42

我无法弄清楚如何仅使用 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/

I can't figure out how to do it with only css, but I can make it work with javascript.

HTML (inside body):

<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 (to be placed in head):

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;

The getDocHeight() function is from here: http://james.padolsey.com/javascript/get-document-height-cross-browser/

回复收藏 0 原文

~没有更多了~