Home/ Questions/Q 6039553
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T06:23:07+00:00

I’m trying to make a web page with a fixed header and a scrollable

  • 0

I’m trying to make a web page with a fixed header and a scrollable content area. This is trivial when the header has a known height but I’m struggling to find a solution for when the header is fluid.

The layout I want is:

--------------
head
--------------
content
--------------

where “head” is whatever height its content needs it to be and “content” has no minimum height but will reach a maximum height of the bottom of the viewport before becoming scrollable.

Is this possible these days in pure CSS? I’m targeting IE8+.

To clarify what I want, here is what I would do if I knew the height of the header:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">

body {
    margin: 0;
}

#head {
    background: yellow;
    height: 20px; /* I can't rely on knowing this. */
}

#content {
    background: red;
    position: absolute;
    top: 20px; /* here also */
    bottom: 0;
    width: 100%;
    overflow: auto;
}

        </style>
    </head>
    <body>
        <div id="head">some variable height content</div>
        <div id="content">
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
            scrollable content<br/>
        </div>
    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Assuming by “fixed” you mean position:fixed, I don’t think it’s possible in pure CSS, as position:fixed takes the element out of the document flow.

    However, it should just take a line or two of JavaScript to get what you want. Something like this (untested, only for example purposes, will need syntax tweaked to actually work):

    var height = document.getElementById("head").offsetHeight;
document.getElementById("content").style.marginTop = height + 'px';

    Something like that should get you the rendered height of the fixed <div> and set the content <div>‘s margin accordingly. You’ll also need to explicitly set a background color on the fixed <div>, otherwise the content will appear to bleed into the fixed one when scrolling.

    • 0