CODEWITHSUNDEEP
htmlcssresponsive-design
Matt Cashatt
Matt Cashatt

Reputation: 24208

Simple Responsive Design--How do I create a sticky header and footer and then force the content div to expand between them?

Thanks for looking.

I am trying to make a very simple responsive HTML layout:

HTML:

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

CSS:

#header{
    width: 100%;
    height: 50px;
}

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

#footer{
    width: 100%;
    height: 50px;
}

The end-product should be a page that has a 50px tall header anchored to the top of the screen and a 50px tall footer anchored to the bottom of the screen. In between, the "content" div should expand to fill the space between the header and footer no matter what the size of that space.

I have already checked out several tutorials on "sticky footers" and, unfortunately, they aren't quite what I am after as they do not account for the "content" div expanding to fill the space between header and footer.

This is a close example of what I am after, but this site is written in Flash:

http://www.wearegolden.co.uk/

Try resizing your screen when you look at this.

What am I missing here? Thanks!

SOLVED!

HTML:

<div id="header">
</div>

<div id="content">
    content
</div>

<div id="footer">
</div>

CSS:

html, body {height: 100%; margin:0px !important;}

#header{
    position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    background-color: #777;
    z-index: 1;
}

#content{
    padding-top: 50px;
    padding-bottom: 50px;
    background-color:#ffffcc;
    position: fixed;
    top:0px;
    bottom:0px;
    width:100%;
}

#footer{
    background-color: #777;
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    z-index: 1;
}

THANKS!

Upvotes: 5

Views: 18697

Answers (3)

otherDewi
otherDewi

Reputation: 1098

sounds like you need to just fix the header and footer.

header{position:fixed; top:0; z-index:10}
footer{position:fixed; bottom:0; z-index:10}

The main body content will scroll between these fixed elements, if larger than the space.

note I believe its good practice to z-index in multiples of 10. This gives you the flexibility to slot an element into your stack if one is missed out.

Upvotes: 8

dc5
dc5

Reputation: 12441

Yet another approach is to use absolute positioning (jsFiddle):

#header, #content, #footer { 
    position: absolute; 
    left: 0; 
    right: 0; 
}

#header {
    height: 50px;
    top: 0;
}

#content {
    top: 50px;
    bottom: 50px;
}

#footer {
    height: 50px;
    bottom: 0;
}

Upvotes: 0

Hakan B.
Hakan B.

Reputation: 2379

If you're looking for a simple solution, you can position the header and footer in a fixed position at the top and bottom of the page. 

.header {
    position: fixed;
    top: 0;
    height: 50px;
    width: 100%;
    background: #eee;
}

.footer {
    position: fixed;
    bottom: 0;
    height: 50px;
    width: 100%;
    background: #eee;
}

Here's an example:

http://codepen.io/anon/pen/eCEca

Alternatively, you may want to look into something like jQuery Mobile's persistent navbars, which offers what you're looking for: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/fixed-toolbars/footer-persist-a.html

Upvotes: 0

Related Questions