html - 扩展页脚底部

Question

我正在努力将页脚扩展到页面底部，我已经接近给出的一些解决方案，但它似乎不起作用。

我希望 div bottomHalf 延伸到浏览器页面的底部。但出于某种原因，它一直在超越它。

我怎样才能让它工作？我在 body wrapper 和 bottomHalf

中将高度设置为 100%

<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>

Answer 1

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