1

我有一个想要用作固定页脚的宽幅图像。主页为 960px 并居中，页脚为 1620px。如果浏览器窗口的宽度大于 960 像素，则它会显示越来越多的页脚图像而不显示滚动条。

我怎样才能做到这一点？到目前为止，我有这个，但它是错误的：

CSS

* {
  margin: 0;
}

html, body {
  height: 100%;
}

div#wrapper {
  position: relative;
  width: 100%;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0 auto -340px;
  text-align: center;
}

div#body-container {
  width: 960px;
  margin-left: auto;
  margin-right: auto;
}

.footer, .push {
  width: 1620px;
  height: 340px;
}

HTML

<div id="wrapper">
  <div id="body-container"> <!-- width: 960px -->
    <!-- content -->
  </div>

  <!-- fixed footer -->
  <div class="push"></div>
  <div class="footer"><img src="img/footer.png"></div> <!-- width: 1620px -->
</div>
4

2 回答 2

1 
.footer {
width:100%;
height:345px;
display: block;
background:url(/img/footer.png) no-repeat center top;
}
于 2012-12-02T19:41:49.760 回答
0

You can solve this by updating the width of your footer to 100% and adding the property overflow: hidden which will remove the scrollbars if the content inside (the image) is larger than the width of the footer.

It gets a little more complicated however if what you're trying to do is also center the image. For this you'll need to add relative positioning to the .footer and absolute positioning to the img. You'll also need to add left: 50% and margin-left: -810px (half of your image width) to the img.

Here is the final updated portions of the code:

.footer, .push {
    width: 100%; /* changed from 1620px;*/
    height: 340px;
    overflow: hidden;
    position: relative;
}

.footer img {
    width: 1620px;
    height: 340px;
    left: 50%;
    margin-left: -810px;
    position: absolute;
}

And here is a jsfiddle to demonstrate: http://jsfiddle.net/uf8Lh/

于 2012-12-02T18:09:56.863 回答