2

CSSテンプレートで次のことを行おうとしています。

  1. ページを埋めるのに十分なコンテンツがない場合は、フッターを下部にドッキングします
  2. ヘッダーとフッターの背景を幅全体に拡大します
  3. すべてのコンテンツをページの中央に配置します

これは私が持っているコードで、ここの助けを借りて作成されました：http: //tinkerbin.com/lCNs7Upq

私の質問は、これを達成するためのいくつかの方法を見てきました。これは最高ですか？空のdivも必要なのは残念なことのようですが、これはボッジですか？

4

2 に答える 2

6

CSSを使用して、フッターに要素を修正できます。

position: fixed;
bottom: 0;

しかし、私はあなたが何をしようとしているのかを正確に理解しようとしています。

ヘッダーとフッターは、divの場合、ページ全体で自動的に100％移動する必要があります。

中央のセクションは高さに設定できます：auto; cssを介してビューポートを埋め、フッターを一番下まで押しますが、これを行うには、ボディを100％に設定して機能させる必要があります。

html, body, #content {
    height: 100%;
    min-height: 100%;
}
#header {
    height: 100px;
    width: 100%;
    background: blue;
    position: fixed;
    top: 0;
}
#content {
    height: auto;
    margin: 100px auto;
    background: green;
}
#footer {
    position: fixed;
    bottom: 0;
    height: 100px;
    width: 100%;
    background: red;
}

HTMLは次のようになります。

<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>

実例：http：//jsfiddle.net/s4rT3/1/

于 2012-10-10T18:45:16.167 に答える
3

これは私が見た中で最高の例です：

http://css-tricks.com/snippets/css/sticky-footer/

* {
  margin: 0;
}
html, body {
  height: 100%;
}
.page-wrap {
  min-height: 100%;
  /* equal to footer height */
  margin-bottom: -142px; 
}
.page-wrap:after {
  content: "";
  display: block;
}
.site-footer, .page-wrap:after {
  height: 142px; 
}
.site-footer {
  background: orange;
}
<div class="page-wrap">
  
  Content!
      
</div>

<footer class="site-footer">
  I'm the Sticky Footer.
</footer>

更新：2019年には、flexを使用する方が適切なオプションです。

于 2012-10-10T18:00:30.913 に答える