4

動的な高さ (成長するコンテンツ) を持つ div の下部にあるスティッキー フッターを取得しようとしています。div はページの中央に配置する必要があります (左右から同じ距離)。

私は次のHTMLを持っています（無関係なものを取り除いています）：

<html>
<body>
  <div class="bodybackground">
    <div class="container"><!-- floats in the middle -->
      <div class="mainContainer"><!-- different color etc -->
        <!-- content with dynamic height -->
      </div>
      <footer class="pagefooter"></footer>
    </div> 
  </div>
</body>
</html>

および次の CSS (無関係なものも削除されています):

html {
  height: 100%;
  margin: 0px;
  padding: 0px; 
}
body { 
  margin: 0px;
  height: 100%; 
}
.bodybackground {
  height: 100%;
  min-height: 100%;
}

.container { 
  min-height: 100%;
  display: inline-block; /* needed make it float in the middle of body */
  top: 0px;
  position: relative;
  padding: 0px;
  padding-bottom: 158px; /* height of footer */
}
.mainContainer {
  position: absolute;
  height: 100%;
  overflow: auto;
}
.pagefooter {
  position: absolute;
  bottom: 0px;
  margin: 0px;
  padding: 0px;
  height: 158px; 
}

それでも、mainContainer のコンテンツは、フッターが一番下にあるのではなく、フッターの後ろに浮かんで続きます。コンテナの表示プロパティを強制的に変更する例を除いて、見つけることができるすべてのことを試しました。これは、コンテナを真ん中に浮かせておく必要があるためです。

私がばかである場所の手がかりはありますか？ありがとう！！

.push をもう少しいじる必要がありましたが、問題は解決しました。素早い回答ありがとうございます。

4

2 に答える 2

8

absolute を使用することで、フッターと mainContainer は配置場所に依存します。絶対を使用してフッターを下部に設定すると、ビューポートの下部に固定されます。

スティッキーの場合、必要に応じて相対単位と正しい高さを使用する必要があります。

html, body { width:100%; height:100%; }
#wrap { 
min-height:100%;
height:auto !important;
height:100%;    
margin: 0 auto -158px;  /* Bottom value must = footer height */
}

.pagefooter, .push { width:100%; height:158px; position:relative; bottom:0; }

順番が回ります

 <div id="wrap">
 <!--All of your content goes here-->
 <div class="push"></div>
 </div>
 <div class="pagefooter"></div>

そうすれば、フッターには常に十分なスペースがあり、下部に設定されます。margin:auto ラップの内側はラップを中央に配置します ( width:100% でな​​い限り、インラインなしで中央に配置されます)

于 2013-02-26T03:16:52.793 に答える
0

したがって、コンポーネントが中央に配置されたスティッキー フッターを探しています。これを行う最も簡単な方法は、下部に固定位置の要素を作成し、その中に中央の div を作成することです (基本的には、幅とマージンが指定された div: auto)。

この例はhttp://jsfiddle.net/gHDd8/で見ることができます- CSS は基本的に

.outerBlockElement {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

.innerBlockElement {
    width: 50%;
    margin: auto;
}

HTMLが同等の場所

<div class="outerBlockElement">
    <p class="innerBlockElement">I am sticky footer text!</p>
</div>

スティッキー フッターは、ページの中央にあるビューポートの下部にとどまります。

于 2013-02-25T20:58:33.790 に答える