Search code examples
htmlcssheaderheightfooter

Header and footer conflict

I am trying to get a sticky footer at the bottom of the page with a solid header at the top of the page. But I am having some difficulties with the body and html class.. My header is 100px in height from the top of the page, my html and body classes are 100% in height and my footer is 150px. I have correctly written the footer in my page so it sticks to the bottom, but the 100% height of the html or body is placing it even further down my page so that you would have to scroll to see the footer even though there is no text pushing it that far down! Here is my CSS code:

html {
height:100%;
background: url(pics/bg.png) no-repeat top center fixed;
margin:0;
padding:0;
}

body {
height:100%;
margin:0;
padding:0;
}

.wrapper {
min-height:100%;
}

.header {
position:fixed;
background:#FFF url(pics/header.png) no-repeat top center fixed;
top:0;
height:100px;
width:1920px;
z-index:1000;
}

.main {
position:absolute;
top:100px;
width:990px;
left:0;
right:0;
overflow:auto;
margin:0 auto;
padding-bottom:150px; /* must be same height as the footer */
padding-top:10px;
padding-left:5px;
padding-right:5px;
}

.footer {
position:relative;
background-image:url(pics/bg_footer.png);
margin-top:-150px; /* negative value of footer height */
height:150px;
width:990px;
margin:0 auto;
clear:both;
}

And here is my HTML code:

<body>
<div class="wrapper">
    <div class="header">
</div>
<div class="main">
    <p>I can write here</p>
</div>
</div>
<div class="footer">
    <p class="alignleft">© Tim</p>
    <p class="alignright">17 maart 2013</p>
</div>
</body>

I am almost certain it has something to do with the html height of 100%.. Thanks in advance for your help!

Solution

  • Can you try this:

    <body>

    <div class="header"></div>
    <div class="main">
      <p>I can write here</p>
    </div>

    <div class="footer">
      <p class="alignleft">© Tim</p>
      <p class="alignright">17 maart 2013</p>
    </div>

</body>

    Does this suits your needs?

    CSS

    html {
  height:100%;
  background: url(pics/bg.png) no-repeat top center fixed;
  margin:0;
  padding:0;
}

body {
  padding:0;
  margin:0;
}

.header {
  background:#FFF url(pics/header.png) no-repeat top center fixed;
  height:100px;
  width:100%;
}

.main {
  position:absolute;
  top:100px;
  bottom:150px;
  overflow:auto;
  margin:0 auto;
  width:100%;
  padding-bottom:10px;
  padding-top:10px;
  padding-left:5px;
  padding-right:5px;
}

.footer {
    position: absolute;
    width: 100%;
    bottom:0;
    background-image:url(pics/bg_footer.png);
    height:150px;
    width:100%;
    margin:0 auto;
    clear:both;
}

    Check JSFiddle example:

    http://jsfiddle.net/2SL7c/