100% height relatively positioned footer

Question

I'm building a 1 column responsive blog site. I have a fixed position header with navigation, content section with x amount of blog posts (as excerpts) and a footer containing a contact form.

<div id="header">Navigation & Branding</div>
<div id="content">Blog Content</div>
<div id="footer">Contact Form</div>

Everything is working as required apart from the height of the footer. I would like to make the footer height match the height of the browser window, so that (apart from the fixed header) when you scroll to the bottom of the page the only the footer is visible and fills the browser window entirely.

How do I achieve this with css?

score 0 · Answer 1 · answered Sep 24 '13 at 15:54

0

You can do this by setting the #footer as position:absolute; then setting both the width & height to 100%.

answered Sep 24 '13 at 15:54

Jessica

3
5

score 0 · Answer 2 · answered Sep 24 '13 at 15:55

As long as your footer div is a direct descendant of the body, and the body has the margin and padding set to 0, setting the height of your footer to 100% should do. This example should demonstrate:

<html>
    <head><title>title</title><head>
    <body style="margin:0; padding:0;">
        <div id="header" style="height: 300px; background-color: blue;">Navigation & Branding</div>
        <div id="content" style="height: 500px; background-color: red;">Blog Content</div>
        <div id="footer" style="height:100%; background-color: yellow;">Contact Form</div>
    </body>
</html>

Mohsen Safari · Answer 3 · 2013-10-11T17:41:17.337

you want some thing like this ??

HTML:

<div id="mainbody">
  <div id="header">Navigation & Branding</div>
  <div id="content">Blog Content</div>
  <div id="footer">Contact Form</div>
</div>

CSS:

html, body{
    width:100%;
    height:100%;
}
#header{
    position:fixed;
    top:0;
    height:50px;
    width:100%;
    background:red;
    color:white;
}
#mainbody{
    padding-top:50px;
    background:blue;
    color:white;
    width:100%;
}

#footer{
    background:green;
    position:absolute;
    height:100%;
    width:100%;
    color:white;
}

100% height relatively positioned footer

3 Answers3

DEMO