html - ボディが95％の場合、フッターを100％に設定するにはどうすればよいですか？

Question

私はWebサイトを少し変更する必要がありましたが、現在、Webサイトのレスポンシブレイアウトはビューポート幅の95％であり、サイズを変更すると調整されます。

これは素晴らしいことです。これからも続けてほしいのですが、フッターに落ち着いた青色の背景を左右に並べてほしいので、どういうわけかそれを行う方法を思い付くことができません。

誰か助けてもらえますか？

Answer 1

これを試してください -デモ

HTML

<div id="container">
    <h1>TITLE</h1>

    <section>MAIN CONTENT</section>

    <footer> FOOTER </footer>
</div>​

CSS

#container {
    width: 95%;
    margin: auto;
    background: honeydew;
}

footer {
    position: absolute;
    width: 100%;
    background: beige;
    margin-left: -2.5%;
}

Answer 2

body他のすべての要素が含まれています。bodyしたがって、その内側よりも大きいものを持ってはいけません。

左下隅 ( position: absolute; bottom: 0px; left: 0px;) の幅で絶対に配置することもできますが100%、おそらくそれを機能させることができますが、代わりに、幅95%divの要素を含む要素の内側にコンテナー要素 (おそらく ) を作成することをお勧めします。bodyそのコンテナの外側にフッターを配置します。

ただし、どちらの方法がより信頼できるかはわかりません。

Answer 3

既存の「ヘッダー」コンポーネントを他の「ラッパー」コンポーネント (div、span など) でラップしようとしましたか? 例：

<div id="wrapper" width="100%"

<div id="header" width="95%">
  some header stuff here
</div>

<!-- foo bar --> 

<div id="footer" width="100%">
  my footer
</div>

</div>