Question

首先,这里是一个链接:。

现在我一直在尝试数小时,但我似乎无法找到解决办法。

该网页的结构如下:

机构

 <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%的高度。我用per子管理这一罚款。现在的问题是:

我想鞋子-鞋子永远留在包装商的底层(margin:10px)。但是,当内容高于屏幕分辨率时,我还需要总结,而没有重叠。因此,我需要双手治疗。然而,这总是直接放在一页,而不是上下页。

任何想法?

机构{
    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;
}

任何想法? Again, the link: http://template1.design.sflueckiger.ch/pages/home.php

Answer 1

One more solution :) Put your footer outside the page-wrapper and:

#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

这里是你们所需要的。

你们想把脚 foot放在底边,然后在“页”上添加同样的dding子。

#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;
}

友情链接