3

フッターをページの下部に保持しながら、絶対位置を維持したいのですが、次のページ構造があります。

<div id="head"> </div> //want to keep its size auto and always on the top (position absolute) 
<div id="body"> </div> //the children of #body have position absolute (keep size auto)
<div id="foot"> </div> //want to keep this at the bottom (just below body , if body size 
                         changes then footer will also change (position absolute)

これどうやってするの？

編集

私は私の質問に明確ではなかったと思います、申し訳ありませんが、私の実際の問題は、 #main ( height : auto ) の内容が絶対であるため、それらの内容が main の高さに含まれていないことです (私はこれを推測しています)フッターが表示されるため、メインの高さが0だったのはなぜですか。これは私の実際の問題です。

4

2 に答える 2

5

使用bottom:0:

#foot {
  position:absolute; /* your requirement, you can also use fixed though */
  bottom:0;
  /* your other possible styles */
}

forbottomが機能するには、あなたが言ったように を指定する必要があることに注意しpositionてください:)

を使用する場合、スクロールposition:fixedしてもページの下部にフッターが表示されますが、それは要件次第です。

于 2012-06-09T10:25:28.010 に答える
3

私が正しく理解しているなら、あなたは必要position:fixedであり、絶対的ではありません..

#head {
    position:fixed;
    height:30px;
    top:0;
    left:0;
    right:0;
}
#foot{
    position:fixed;
    height:40px;
    bottom:0;
    left:0;
    right:0;
}

#body{
    padding-top:30px; /* the same as the #head height*/
    padding-bottom:40px; /* the same as the #foot height*/
}

http://jsfiddle.net/ZXMTR/のデモ

于 2012-06-09T10:33:24.710 に答える