CSS: Anything but Content fixed

Question

I'm trying to make a layout where the banner, the navigation and footer always stay fixed while you can scroll the content. I have seen some kinda similar layouts here but the actual page content is not limited there. What I want now is to center anything, but you better you maybe need something visual - what I got so far:

html

<body>
<div id="container">
    <div id="banner"></div>
    <div id="main">
        <div id="nav1"></div>
        <div id="nav2"></div>
        <div id="content"></div>
    </div>
    <div id="footer"></div>
</div>

css

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    background-color: #222;
}

#container {
    margin: 0 auto;
    height: 100%;
    width: 800px;
    margin-top: 20px;
    background-color: black;
}

#banner {
    width: 100%;
    height: 100px;
    background-color: red;
}

#main {
    height: 100%;
    width: 100%;
}

#nav1 {
    height: 100%;
    width: 150px;
    float: left;
    background-color: yellow;
}

#nav2 {
    height: 100%;
    width: 100px;
    float: right;
    background-color: yellow;
}

#content {
    height: 100%;
    width: 100%;
    background-color: white;
}

#footer {
    width: 100%;
    height: 30px;
    background-color: lime;
}

jsfiddle: http://jsfiddle.net/gLhd6sno/1/

When scrolling I want only the content in the white area to move, also I cant figure out how to disable overflow without breaking that layout. Maybe you have an idea? Thank you.

score 1 · Accepted Answer · answered Oct 04 '14 at 23:10

Here is one way of doing it that relies on absolute positioning.

* {
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    width: 100%;
    background-color: #222;
    margin: 0;
}

#container {
    width: 800px;
    left: 50%;
    margin-left: -400px;
    background-color: black;
    position: absolute;
    top: 20px;
    bottom: 0;
}

#banner {
    width: 100%;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 0;
}

#main {
    width: 100%;
    position: absolute;
    top: 100px;
    bottom: 30px;
}

#nav1 {
    width: 150px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: yellow;
    border: 2px dotted blue;
}

#nav2 {
    width: 100px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: yellow;
    border: 2px dotted blue;
}

#content {
    position: absolute;
    top: 0;
    bottom: 0px;
    left: 150px;
    right: 100px;
    background-color: tan;
    border: 2px dotted blue;
    overflow: auto;
}

#footer {
    width: 100%;
    position: absolute;
    bottom: 0;
    height: 30px;
    background-color: lime;
}

See demo: http://jsfiddle.net/audetwebdesign/k9nsvt3t/

If you shrink the height, you will see a scroll bar appear around the content area, which may do the trick. The rest of the page elements are static regardless of the amount of content in the main area.

CSS: Anything but Content fixed

1 Answers1