How do I use CSS to position a fixed variable height header and a scrollable content box?


Tags: css

Problem :

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 it's 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>


Solution :

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.


    CSS Howto..

    How to make a white square around my form fields?

    How do I apply (or edit) a broad set of styles to only one class/ID?

    How to get a table-cell aligned to the right?

    How can I add read more click event to only open one news article?

    how to add class with animation?

    How to write a CSS selector that works on nested divs and selects the closest match?

    How to use CSS to change icon color

    How to add css library to project generated with angular-cli@webpack

    How to modify a CSS display property from JavaScript?

    How to fix each column in Table? [closed]

    How to create hidden pop out side menu

    How to build native C++ apps with HTML/CSS UI?

    How to change element CSS class when different part of web page is present?

    How to hide some text in the middle of a string with only css [duplicate]

    How to create a full width background image with a variable height depending on content?

    How to Edit the CSS File of the Installed Plugin in Wordpress

    How does the :not selector work to block older browsers and for which browsers does it work? [closed]

    How do I correct overlapping spacing error in CSS when it wraps text?

    How to play css transition effect from javascript

    How to turn off :hover with CSS?

    jQuery .animate() sets display:none, how to avoid?

    How to create CSS/JavaScript circles grid

    How to store a global variable in JQuery?

    how to style margins between items in a
    list?

    Getting an class to show when item is clicked

    How to change MenuItem focus/hover color

    CSS Positioning - How can you fix components in place?

    HTML/CSS - How can I change the spacing or add whitespace so the boxes are equal?

    How to switch images on click in html and css

    how to center two div in xs