Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

100% height div between header and footer

Tags:

html

css

frontend

I am trying to create a webpage layout with a header/footer (100% width, 145px height), a 'main area' between the header/footer (100% width, dynamic height), and a container around the content that is a unique background color (860px width, dynamic height but is always 'flush' against the footer).

(See Example for a visual)

The problem I am having is I can't seem to have the 'content container' always be flush with the footer when there is minimal content. Using a setup like the (original example) results in the footer floating over the content if there is a respectable/'normal' amount of content or if the window is resized.

And the Following CSS results in a gap between the content and the footer.

html,body{
   margin:0;
   padding:0;
   height:100%;
  background:yellow;
}

.wrap{
   min-height:100%;
   position:relative;
}

header{
  background:blue;
   padding:10px;  
}

#content{
  height:100%;
  width: 400px;
  margin:0 auto;
  background:orange;
    padding:30px;
}
footer{
  background:blue;
  position:absolute;
  bottom:0;
  width:100%;
  height:60px;
}

How can I make the content container be the full height of the screen when content is minimal and have the footer 'stick' to the bottom of the page, while also being dynamic to resize appropriately if there is a normal amount of content (footer is always at the bottom of the content)?

Thank you!

like image 278
user2339983 Avatar asked May 01 '13 16:05

user2339983


People also ask

How do I make my div 100%?

Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.

How do I make my div take 100% height of parent div?

Answer: Set the 100% height for parents too And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.

What does height 100% do CSS?

height: 100% gives the element 100% height of its parent container. height: auto means the element height will depend upon the height of its children.


1 Answers

FIDDLE: http://jsfiddle.net/3R6TZ/2/

Fiddle Output: http://fiddle.jshell.net/3R6TZ/2/show/

CSS

html, body {
    height: 100%;
    margin:0;
}
body {
    background:yellow; 
}
#wrapper {
    position: relative;
    min-height: 100%;
    vertical-align:bottom;
    margin:0 auto;
    height:100%;
}
#header {
    width: 100%;
    height: 150px;
    background:blue;
    position:absolute;
    left:0;
    top:0;
}
#content {
    background:pink;
    width:400px;
    margin:0 auto -30px;
    min-height:100%;
    height:auto !important;
    height:100%;
}
#content-spacer-top {
    height:150px;
}
#content-spacer-bottom {
    height:30px;
}
#divFooter {
    width:100%;
    height: 30px;
    background:blue;
}

HTML

<div id="wrapper">
    <div id="header">Header</div>
    <div id="content">
        <div id="content-spacer-top"></div>
        <div id="content-inner">
            **Content Goes Here**
        </div>
        <div id="content-spacer-bottom"></div>
    </div>
    <div id="divFooter">Footer</div>
</div>

UPDATE

The #content-spacer-top and #content-spacer-bottom are used to pad the #content div without using padding or margin that would increase the box size past the 100% height causing problems.

In CSS3, there is the box-sizing property (more info here) that can fix this issue, but i'm assuming you don't want to depend on CSS3 features.

EDIT

Added a fix and tested down to IE7

UPDATE 2

Alternate method using :before and :after pseudo-elements instead of the spacer divs: http://jsfiddle.net/gBr58/1/

Doesn't work in IE7 or 6 though, and to work in IE8, a <!DOCTYPE> must be declared (according to w3schools.com), but the HTML is nice and clean

UPDATE 3 (Sorry for so many updates)

Updated it to work down to IE6. I don't normally bother as my company doesn't support IE6, but it was an easy fix...

like image 122
Chris Curtis Avatar answered Sep 22 '22 23:09

Chris Curtis