0

ブラウザウィンドウの下部にフッターを配置しようとしています。コンテンツdivは、コンテンツの高さが変化するため、絶対的な位置にあります。これを行ういくつかの異なる方法を見てきましたが、何らかの理由で、大部分が#content divを壊し、フッターがヘッダーとコンテンツdivの間に位置します。誰かアイデアはありますか？

これが私のhtmlです

<div id="header"></div>
  <div id="content">                                                                        
      @RenderBody()                                  
  </div>                              
 <div id="footer"></div>

これが私のCSSです

#header {
height:115px;
position: relative;
color: #000;
padding-top: 10px;
border-bottom:1px solid #fff;
-moz-box-shadow: 0 0 10px 10px #ccc;
-webkit-box-shadow: 0 0 10px 10px #ccc;
box-shadow: 0 0 10px 10px #ccc;
}

#content {   
width:900px;
height:100%;
margin-top:40px;
margin-left:-450px;
left:50%;
position:absolute;    
}

#footer {
width:auto;
height:100px;
background:#d21f27;
margin-top:5px;
clear:both;
bottom:0;      
}
4

2 に答える 2

1

高さを変更するために絶対位置は必要ありません。

答えを参照してくださいhttp://jsfiddle.net/XpKJG/

絶対を使用する場合と使用しない場合を読む

于 2012-06-13T14:45:47.437 に答える
1

フィドライザーが言ったように、絶対的なポジショニングは必要ありません#content。
ただし、特別なインターフェイスデザインなど、いくつかの理由で役立つ場合があります。

スティッキーフッターを作成するには、ライアンフェイトからの回避策が、私が知っている最も簡単で安定した方法です：http:
//ryanfait.com/sticky-footer/

これをレイアウトに適用し、#content絶対値をで設定できますtop: 125px; right: 0; bottom: 100px; left: 0。

重要：現在の問題は、ビューポートの幅と高さに応じてコンテンツが表示されなくなる可能性があることです。これを行うことはお勧めしませんが、問題が解決する可能性があります。

デモ： http： //jsfiddle.net/ubJAf/2/

于 2012-06-13T15:53:57.493 に答える