CODEWITHSUNDEEP
htmlcss
Mike
Mike

Reputation: 105

Sticky header, sticky footer (variable height), fluid middle?

I'm trying to put together a simple 3 row layout in CSS. It needs:

Here's what I've got so far:

HTML

<body>
    <div id="container">
        <div id="headContainer">
            ...
        </div>
        <div id="bodyContainer">
            Stuff goes here
        </div>
        <div id="footContainer">
            ...
        </div>
    </div>
 </body>

CSS

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    background-color:#2c3e50;
}

div#container {
    height:100%;
    width:100%;
}

div#headContainer {
    background-color:#e74c3c;
    height:48px;
    width:100%;
    z-index:1;
}

div#bodyContainer {
    overflow:auto;
    width:100%;
    top:48px;
    position:absolute;
    background-color:#FFFFFF;
}

div#footContainer {
    background-color:#c0392b;
    width:100%;
    position:absolute;
    bottom:0;
    padding:11px 18px;
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

http://jsfiddle.net/MsKaj/2/

I'm struggling to work out how I get the 'bodyContainer' to fill the available space between the header and footer. If the footer was a fixed size, this would be a lot easier!

Any tips?

Upvotes: 3

Views: 6412

Answers (3)

Dan Dascalescu
Dan Dascalescu

Reputation: 151684

All other solutions here are out of date and either resort to JavaScript, or don't support a variable height footer.

With the advent of the CSS flex model, solving the variable-height sticky footer problem becomes very, very easy: while mostly known for laying out content in the horizontal direction, Flexbox actually works just as well for vertical layout problems. All you have to do is wrap the vertical sections in a flex container and choose which ones you want to expand. They'll automatically take up all the available space in their container.

Note how simple the markup and the CSS are. No table hacks or anything.

The flex model is supported by all major browsers as well as allegedly IE11+, though my IE doesn't render this snippet correctly yet.

html, body {
  height: 100%;
}

#headContainer {
  background: yellow;
  height: 100px;  /* can be variable as well */
}

#wrapper {
  display: flex;  /* use the flex model */
  min-height: 100%;
  flex-direction: column;  /* learn more: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */
}

#bodyContainer {
  flex: 1;
  border: 1px solid orange;
}

#footContainer {
  background: lime;
}
<div id="wrapper">
  <div id="headContainer">Title</div>
  <div id="bodyContainer">Stuff goes here</div>
  <div id="footContainer">
    Footer<br/>
    of<br/>
    variable<br/>
    height<br/>
  </div>
</div>

Upvotes: 3

GreyRoofPigeon
GreyRoofPigeon

Reputation: 18123

You can make it like this (with fixed header and footer)

HTML:

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

CSS:

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}
.header, .footer {
    position: fixed;
    width: 100%;
    height: 48px;
    left: 0;
    background: lightgreen;
}
.header {
    top: 0;
}
.footer {
    height: 62px;
    bottom: 0px;
}
.content {
    min-height: 100%;
    background: lightblue;
    padding: 48px 0 62px 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
}

And a DEMO.

Upvotes: -1

Pat Dobson
Pat Dobson

Reputation: 3299

Put:

height: 100%;

on div#bodyContainer

Also, consider applying position: fixed; to the header and footer and fixing them to the top of the screen and the bottom of the screen respectively...

Upvotes: -2

Related Questions