Home/ Questions/Q 7798685
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T00:04:19+00:00

I’m trying to establish a layout with in the base three rows: A header,

  • 0

I’m trying to establish a layout with in the base three rows: A header, content and footer div.
The two outer most div’s are of a fixed height; The center div has to be fluid and adapt itself to the height of the browser screen.

Sample of layout

Could someone point me in the right direction how to tackle this with proper CSS? For now I’m not yet interested in a javascript solution. As CSS doesn’t provide a clean answer, a javascript solution comes eminent!

This is how far I came:

<div id='header'>Header</div>
    <div id='content'>
        <div id='innerContent'>
            This is the fluid part
        </div>
    </div>
<div id='footer'>footer</div>

css:

#header {
    position:absolute;
    top:0px;
    left:0px;
    height:100px;
    z-index:5;
}
#content {
    position:absolute;
    top:0px;
    left:0px;
    height:100%;
    z-index:2;
}
#innerContent {
    margin-top:100px;
    height:100%;
}
#footer {
    height:400px;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    EDIT:
    I’m sorry, I feel embarassed. I made something similar about a year ago, but at first I didn’t think it was possible to adjust it to this situation. Apparently it was.

    As I think other’s have already said, it is possible to put the footer div at the bottom by positioning it absolutely. The problem is to adjust it’s position when the content div gets larger. Since the footer is absolutely positioned it won’t follow the content div’s flow, which makes it stay at the same place even though the content expands.

    The trick is to wrap everything in an absolutely positioned div. It will expand if it’s content gets larger, and the footer div will be positioned according to the wrapper’s borders instead of the document’s borders.

    Here’s the code. Try to put a bunch of <br /> tags within the content div and you’ll see that everything adjusts.

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Layout test</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #wrapper {
        min-height: 100%;
        min-width: 100%;
        position: absolute;
    }

    #header {
        height: 100px;
        background-color: red;
    }

    #content {
        background-color: gray;
        margin-bottom: 50px;
    }

    #footer {
        height: 400px;
        min-width: 100%;
        position: absolute;
        bottom: 0px;
        margin-bottom: -350px;
        background-color: blue;
    }

    </style>
</head>
<body>
    <div id="wrapper">
        <div id='header'>Header</div>
        <div id='content'>
            Content

        </div>
        <div id='footer'>footer</div>
    </div>
</body>
</html>

    ORIGINAL:
    Sadly, css lacks a clean way to do this. You don’t know the viewport height (which you called h) and therefore can’t calculate h-100-50 You have to build your website so that most people will see 50px of the footer div. The way to do that is to set a min-height for the content div.

    The min-height value must be derived from some standard viewport height. Google Labs have published their data on viewport sizes for their visitors and made a great visualization of it here:
    http://browsersize.googlelabs.com/

    I design for my own viewport, which is 620px high (according to google ~80% have this viewport height). Therefore the min-height for the content div should be 620-100-50 = 470 px.

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Layout test</title>
    <style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #header {
        height: 100px;
        background-color: red;
    }

    #content {
        min-height: 470px;
        background-color: gray;
    }

    #footer {
        height: 400px;
        background-color: blue;
    }

    </style>
</head>
<body>
    <div id='header'>Header</div>
    <div id='content'>
        Content
    </div>
    <div id='footer'>footer</div>
</body>
</html>
    • 0