Question

我有这样的html结构：

<body>
  <div class='header'>
  </div>
  <div class='wrapper'>  
      ****
  </div> 
  <div class='footer'>
  </div> 
</body>

和这样的css：

body, html{
  background-color: #5669e1;
  margin: 0;
  padding: 0;
  border: 0;
  height: 100%;
}
.header {
  position: relative;
  z-index: 10010;
  width:100%;
  height: 226px;
  background: url(../images/header.png) no-repeat center top;
}
.wrapper{
  position: absolute;
  width: 1200px;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  display: table;  
  left: 50%;
  margin: -100px 0 0 -600px;
  z-index: 10000;
  padding-bottom: 176px;  
  background-color: #fff;
  -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.75);
  -moz-box-shadow:    0px 0px 20px rgba(0, 0, 0, 0.75);
  box-shadow:         0px 0px 20px rgba(0, 0, 0, 0.75);
}
.footer{
  height: 176px;
  background: url(../images/footer.png) no-repeat center;
  position: relative;  
  height: 176px;  
  margin-top: -176px;  
}

但它是在标题之后，当我的包装不是绝对的时候，它在不同的页面上也显示出奇怪的效果。我怎么能把它放在176px的包装器底部？

Answer 1

你应该可以这样做：

html, body {
    height: 100%;
    padding:0px;
    margin:0px;
}

.header {
    height:200px;
    width:100%;
}

.wrapper {
    min-height: 100%;
    height: auto !important;
}

.footer {
    height: 176px;
}



<body>
    <div class="header">
        <p>header</p>
    </div>
    <div class="wrapper">
        <p>Your website content here.</p>
    </div>
    <div class="footer">
        <p>Footer</p>
    </div>
</body>

如果包装是绝对定位的，页面底部的页脚

1 个答案: