Home/ Questions/Q 6160241
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T21:15:59+00:00

I have a CSS layout in which a content div has absolute positioning to

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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