CODEWITHSUNDEEP
htmlcssfooter
Eric Arsmeinz
Eric Arsmeinz

Reputation: 33

Extend footer bottom of page

I was working on extending my footer to the bottom of the page, i came close to a few solutions i was given but it doesnt seem to work.

I want it so the div bottomHalf extends to the bottom of the page on the browser. But for some reason it keeps going past it.

How can i get this to work? I put height to 100% in body wrapper and bottomHalf

<style type="text/css">

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #F0E4C9;
    font-family:"Times New Roman", Times, serif;
}

#wrapper {
    margin: 0 auto;
    width: 990px;
    position: relative;
    min-height: 100%;
    height: 100%;
}

#topHalf {
    margin: 0 auto;
    width: 990px;
    height: 435px;
    background-color:#960;
}


#navigation {
    margin: 0 auto;
    width: 990px;
    height: 55px;
    background-color:#0CF;
}

#bottomHalf {
    margin: 0 auto;
    width: 990px;
    min-height: 100%;
    height: 100%;
    background-color: #4d3c37;
    color: #FFF;
}

</style>

<div id="wrapper">
  <div id="topHalf"></div>


  <div id="navigation"></div>


  <div id="bottomHalf">EXTEND THIS TO BOTTOM OF PAGE, GOES TO FAR</div>

</div>

Upvotes: 1

Views: 1375

Answers (1)

Swap
Swap

Reputation: 298

#bottomHalf {
margin: 0 auto;
width: 990px;
min-height: 100%;
height: 100%;
background-color: #4d3c37;
color: #FFF;
possition: fixed;
bottom: 0;
}

Upvotes: 1

Related Questions