0

したがって、このサイト: http://itec.org フッターの背後に、ブラウザの幅に収まる水色の背景を持たせようとしていますが、スクロールバーはありません。私が使用した現在の解決策は次のとおりです。

.custom #footer-bg { /* wrapper for the footer */
  position: relative;
  background: rgb(0, 111, 111); 
}
.custom #footer-bg:before, .custom #footer-bg:after {
  content: "";
  position: absolute;
  background: rgb(0, 111, 111);  /* Matches the background of the footer's background */
  top: 0;
  bottom: 0;
  width: 1000px;
} 
.custom #footer-bg:before {
  right: 100%; 
}
.custom #footer-bg:after {
  left: 100%;
}

...しかし、これにより水平スクロールバーが追加されます。スクロールバーを取り除く方法はありますか?ただし、ブラウザーのサイズがコンテンツよりも小さくなった場合でもスクロールバーが表示されるようにしてください。

4

1 に答える 1

0

footerの下に要素を配置div#pageし、その幅を 100% に設定して背景色を指定div#footerし、その中に と同じ幅でネストすることを検討しますdiv#page。margin: auto ondiv#footer` を設定して、フッター内の中央に配置します。

マークアップは次のとおりです。

<footer>
    <div id="footer">
        <!-- Your footer here -->
    </div>
</footer>

そしてCSS：

footer { 
    width: 100%; 
    background: rgb(0, 111, 111);
}

#footer { 
    width: 102.9em; 
    margin: auto;
}

更新:これらの変更を行っても、水平スクロールはまだ少しありますが、フッターとは関係ありません。フッターを削除できますが、スクロールバーはまだそこにあり、要素の1つがページよりも広いことを意味します.

于 2013-07-17T21:50:14.370 に答える