Fixed footer and header and dynamic content with css

3
votes

I have been spending hours trying to solve this but without any result.

What I want is really simple (in theory). I want a fullscreen webpage with a header that always stays at the top and a footer that always stays at the bottom. The content is dynamic. If it exceeds the page, it should grow, pushing the footer down. I want a 980 pixel wide div in the content that is horizontally centered. I want to give that div a different color that the background color. If the content is only one line of text, I still want to div (the background color) to be a 100% of the room between the footer and header. I made a colorful example:

enter image description here

The code I have so far:

<html>
<head>
<style>
#container {
    height: 100%;
    width: 100%;
    background: green;
    position: absolute;
}
#header, #footer {
    height: 100px;
    width: 100%;
    background: red;
}
#body {
    height: 100%;
    width: 100%;
    background: blue;
}
#content {
    width: 980px;
    background: yellow;
}

</style>
<head>

<body>
<div id="container">
    <div id="header"></div>
    <div id="body">
    <div id="content">
        content
    </div>
    </div>
    <div id="footer"></div>
</div>
</body>
</html>

This code is far from okey. First of all it cannot keep the footer at the bottom of the page if the content exceeds the page. Secondly, I have no idea how to include the 980px centered div.

3
htmlcss
If you have a fixed footer and header, you should look into using position. fixed for them ;) - Terry
@Robert Hamers Check out my updated answer with JavaScript. I believe that is what you are looking for. - MCSharp

3 Answers

1
votes

To center the content, use margin: 0 auto;. This will set the margin for top and bottom to 0 and auto adjust margins for left and right. What you are asking most likely will have to involve JavaScript. You will either have a fixed footer at all times, or have the footer at the bottom of content.

What you are asking isn't very practical. If you have a lot of content, your footer will be pushed down anyway. It sounds like you want to have the footer on the bottom when there is little content on the page.

I've written some code to get you started. The JavaScript provides the effect you want. Uncomment the CSS height or add a lot of content in the div, and the footer will be pushed down.

<html>
<head>
    <style>
        body, #body, #header, #footer { width: 100%;margin: 0; padding: 0; }
        #header { height: 100px; background: #7eff02; }
        #footer { height: 100px; background: #ff5c01; }
        #content { width: 980px; background: #fcff00; margin: 0 auto;
            /*height: 3000px;*/
        }
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    <script>

        $(document).ready(function () {
            var headerHeight = $("#header").height();
            var footerHeight = $("#footer").height();

            var resizeTimer;
            $(window).resize(function () {
                clearTimeout(resizeTimer);
                resizeTimer = setTimeout(onWindowResize(), 100);
            });

            onWindowResize();

            function onWindowResize() {
                if ($("#content").height() < (window.innerHeight - headerHeight - footerHeight)) {
                    $("#content").css("height", (window.innerHeight - headerHeight - footerHeight));
                    $("#footer").css({ "position": "fixed", "bottom": "0" });
                }
                else {
                    $("#content").css("height", "");
                    $("#footer").css({ "position": "", "bottom": "" });
                }
            }
        });
    </script>
    <head>

        <body>
            <div id="container">
                <div id="header"></div>
                <div id="body">
                    <div id="content">
                        CONTENT
                    </div>
                </div>
                <div id="footer"></div>
            </div>
        </body>
</html>
0
votes

Try this:

body {padding:100px 0;}
#header, #footer {position:fixed;width:100%;height:100px;}
#header {top:0;}
#footer {bottom:0;}
#container {width:980px;margin:0 auto;}

You're going to run into other problems when your header or footer content exceeds the set height, though.

0
votes

I have also this solution : http://jsfiddle.net/AZE4K/

body {
    padding:0;
    margin:0;    
}

#header, #footer {
    position: fixed;
    width:100%;    
}

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

#footer {   
    left : 0;
    bottom : 0;
    background-color:green;
    height:50px;
}

#content {
    background-color : #111111;
    color:#DDDDDD;
    width:95%;
    height : 1500px;
    margin:auto;
    margin-top : 100px;
    margin-bottom: 50px;
}
<div id="header"></div>
<div id="content">
    <h1>Some text</h1>
</div>
<div id="footer"></div>