Question

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

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

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>

Answer 1

.footer {
width:100%;
height:345px;
display: block;
background:url(/img/footer.png) no-repeat center top;
}

Answer 2

您可以通过将footer的宽度更新为100%并添加属性overflow: hidden来解决此问题，如果内部（图像）内容大于页脚的宽度。

它变得有点复杂，但如果你想要做的也是图像的中心。为此，您需要将relative定位添加到.footer和absolute定位到img。您还需要将left: 50%和margin-left: -810px（图片宽度的一半）添加到图片中。

以下是代码的最终更新部分：

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

这是一个证明：http://jsfiddle.net/uf8Lh/

的jsfiddle

CSS固定页脚宽图像中心调整大小

2 个答案: