1

固定フッターとして使用したい幅の広い画像があります。メインページは 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>
4

2 に答える 2

0

footertoの幅を更新し、内部のコンテンツ (画像) がフッターの幅よりも大きい場合にスクロールバーを削除する100%プロパティを追加することで、これを解決できます。overflow: hidden

ただし、画像を中央に配置しようとしている場合は、もう少し複雑になります。このためには、 にポジショニングを追加し、 にポジショニングを追加する必要がありrelativeます。また、img にand (画像幅の半分)を追加する必要があります。.footerabsoluteimgleft: 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;
}

そして、ここにデモンストレーションするjsfiddleがあります：http://jsfiddle.net/uf8Lh/

于 2012-12-02T18:09:56.863 に答える