0

コンテンツを自動中央揃えにしたいページがあります：

position: absolute 
left: 50%
margin-left: -1/2 of width.

これは機能しますが、使用するposition: absoluteと、フッターが突然コンテンツを表示せずに浮き上がったように見えます。このスティッキーフッターを使用してみましたが、うまくいきません。スティッキーフッターとオートセンターが削除されていないページへのリンクは次のとおりです: http://cashforcarsanywhere.com/how-it-works/

どんな助けでも大歓迎です。

私は JavaScript や jQuery の経験がないので、回答を CSS や HTML に限定してみてください。

4

3 に答える 3

1

#footer on page bottom

必需品:

<div id="footer">
   <p>This is some #footer content</p>
</div>


#footer{
  position:absolute;
  width:100%; /* abs. el. loose width, so regain */
  bottom:0px;
  padding: 20px 15px;
  background:#bada55;
}

#footer on page bottom with Centered Content

必需品:

<div id="footer">
  <div>
     <p>This is some Centered #footer content</p>
  </div>
</div>


#footer{
  position:absolute;
  width:100%; /* abs. el. loose width, so regain */
  bottom:0px;
  background:#bada55;
}

#footer > div{
  margin:0 auto;
  width: 600px;
  padding:20px 15px; /* padding here, now #footer is only a marionette :) */
  background:#cf5;
}

Example with page content

必需品:

<div id="page">
  <p>This is some Centered #page content my 100px padding bottom will prevent the content to end up behing the #footer applying properly the vertical window scrollbars once I touch the very page bottom.</p>
</div>  

<div id="footer">
  <div>
     <p>This is some Centered #footer content</p>
  </div>
</div>


#page{
  margin: 0 auto;
  width:600px;
  padding:20px 15px 100px;
  background:#eee; /* BG is just for example, avoid BG on this element, rather create an inner one*/
}

#footer{
  position:absolute;
  width:100%; /* abs. el. loose width, so regain */
  bottom:0px;
  background:#bada55;
}

#footer > div{
  margin:0 auto;
  padding:20px 15px; /* padding here, now #footer is only a marionette :) */
  width: 600px;
  background:#cf5;
}
于 2013-06-28T17:05:28.623 に答える
0

設定position:absoluteすると、その要素がドキュメント フローから削除されます。そのため、フッターが押し下げられることはなくなります。

以下のCSSで成功しました。

にはいくつかのカスケード定義があることに注意してくださいdiv.span8。float と width の設定はすべて削除してください。span8実際には、そこからクラス全体を削除しただけですdiv。

div.span8 {
  // remove all float and width settings.
  // (I just removed the entire class "span8" from this `div`.)
}


#howitworkscontent {
  position: relative;
  width: 800px;
  padding: 15px auto;
  margin: 0px auto;
  /*float: left;*/
}

例: http://jsfiddle.net/5WFNW/

編集：

hustlerinc が述べたように、OP はブートストラップ レスポンシブを使用しようとしているため、width:800px. ただし、ブートストラップの.spanクラスには が含まれているfloat:leftため、 も設定する必要がありますfloat:none。

于 2013-06-28T16:50:30.353 に答える
-1

ブートストラップを使用する理由は、面倒な css をすべて必要としないためです。有利に使用してください。

編集:私はあなたのコードを詳しく調べました。これがあなたの解決策です。に変更<div class="span8">する<div class="span8 offset2">と、完全に中央に配置されます。

http://twitter.github.io/bootstrap/scaffolding.html#gridSystem

于 2013-06-28T17:00:53.687 に答える