0

このソリューションは、すべてのブラウザでサポートされている必要はありません。

<div id="page">
  <div id="header">&nbsp;</div>
  <div id="content">&nbsp;</div>
  <div id="footer">&nbsp;</div>
</div>

どれどれ。ページを取得しwidth:100%;height:100%ました。ヘッダーとコンテンツは両方を取得しましたがwidth:100%（とにかくこれは必要ですか？）、固定の高さを取得height: 200pxしheight: 500pxました。ここで、フッターがページの残りの部分を埋めるようにします。

そのための解決策はありますか？

ご協力いただきありがとうございます。

4

2 に答える 2

1

次のようなものを使用できます。

html,body,#page {height:100%}
#page {position:relative;}
#header {height:200px;background:green;}
#content {height:500px;background:grey;}
#footer {position:absolute;top:700px;bottom:0;background:red;width:100%;}

実際、 700pxに設定position:absoluteし#footer、値を指定します。topの全高など#headerが空きスペースを埋めます#content。bottom:0

デモ： http： //jsbin.com/icuza3/2

于 2011-02-17T11:10:33.057 に答える
0

私が知る限り、css3は「数学」と単純な関数を実行できます。w3c仕様を参照してください。「calc」を検索してください;）

于 2011-02-17T11:18:28.090 に答える