CSS 设计：保持相对位置但保持在包含 div 的底部

Question

首先，这里有一个链接：http://template1.design.sflueckiger.ch/pages/home.php

我已经尝试了几个小时，但我似乎找不到解决方案。

页面结构如下：

身体

 <div: container - streches the window to all sides at 100%>
 <div: wrapper - keeps the content in the middle>
 <div: page - contains the actual content>
 <div: footer-wrapper - this one contains 3 footer-boxes>

我的问题是我总是想使用 100% 的高度。我用包装器处理得很好。现在的问题是这样的：

我希望页脚包装器始终位于包装器的底部 (margin:10px)。但是，当内容高于屏幕分辨率时，我还需要扩展包装器，而不会重叠。因此，我需要页脚包装器是相对的。然而，这总是将它放在页面 div 的正下方，而不是底部。

有什么想法吗？

body{
    width: 100%;
    height:100%;
    margin: 0;
    padding: 0;
    background:whitesmoke;
}

#top-bar{
    background-color: #F0F0F0 ;
    top: 0px ;
    left: 0px;
    height: 40px ;
    position:fixed;
    width: 100%;
    border-bottom: 1px solid black ;
    z-index: 1000; 
    /*Position of content*/
    text-align:center;
    box-shadow:0px 0px 10px 3px #555;
}
#container{
    position: absolute;
    text-align: center; 
    width: 100%;
    height: 100%;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;

}

#top-bar p{
    margin-top:10px;
}

#page-wrapper{
    min-height:100%;
    width:982px;
    margin:0 auto;
    border:1px solid #555;
    background:#999;
    box-shadow:0px 0px 10px 3px #555;
    position:relative;
}

#page{
    width:960px;
    height:300px;
    margin:50px 10px 10px 10px;
    border:1px solid white;
    background:whitesmoke;

}

#page p{
    padding:10px;
}

#footer-wrapper{
    position:relative;
    bottom:0;
    width:962px;
    height:202px;
    margin:30px 10px 10px 10px !important;  
}

#footer-wrapper p{
    padding-left:10px;
}
#footer-1{
    height:200px;
    width:312px;
    margin:0px 10px 0px 0px;
    float:left;
    background:whitesmoke;
    border:1px solid white;
    border-radius:0px 0px 5px 5px;;
    -webkit-border-radius:0px 0px 5px 5px;
    -moz-border-radius:0px 0px 5px 5px;

}
#footer-2{
    height:200px;
    width:312px;
    margin:0px 10px 0px 0px;
    float:left;
    background:whitesmoke;
    border:1px solid white;
    border-radius:0px 0px 5px 5px;;
    -webkit-border-radius:0px 0px 5px 5px;
    -moz-border-radius:0px 0px 5px 5px;
}
#footer-3{
    height:200px;
    width:312px;
    margin:0px 0px 0px 0px;
    float:left;
    background:whitesmoke;
    border:1px solid white;
    border-radius:0px 0px 5px 5px;;
    -webkit-border-radius:0px 0px 5px 5px;
    -moz-border-radius:0px 0px 5px 5px;
}

有什么想法吗？再次，链接：http://template1.design.sflueckiger.ch/pages/home.php

Answer 1

另一种解决方案:) 将您的页脚放在页面包装器之外，然后：

#footer-wrapper {
    width: 962px;
    margin: -202px auto 0;
    height: 202px;
    position: relative;
}

#page {
    width: 962px;
    margin: 0 auto;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

Answer 2

这就是你需要的。

您希望将页脚绝对定位在底部，然后向“页面”添加相同数量的填充。

#footer-wrapper {
  bottom: 0;
  height: 202px;
  margin: 30px 10px 10px !important;
  position: absolute;
  width: 962px;
}

#page {
  background: none repeat scroll 0 0 whitesmoke;
  border: 1px solid white;
  height: 300px;
  margin: 50px 10px 320px;
  width: 960px;
}