4

この単純な問題のバージョンが、ここや Web の他の場所で何十回も発生しているのを見てきましたが、私にとって有効な解決策がまだ見当たらないので、もう一度質問します。

高さが可変の全幅ヘッダー (コンテンツに基づく高さ) を持つ Web ページが必要です。その下には、ブラウザー ビューポートの残りの部分を埋めるコンテンツ領域が必要です。コンテンツがビューポートの残りのスペースよりも大きい場合は、コンテンツ エリアをスクロールします。

IE6で動作するためにこれは必要ありません。ソリューションが CSS を使用するか、テーブルを使用するか、またはその 2 つの組み合わせを使用するかは気にしません。フレームも Javascript も使用しません。

おまけとして、高さが可変のフッターをページの下部に固定します。

4

1 に答える 1

0

これは、2 つのコンテナーの大きさが事前にわかっていない限り、CSS/テーブルだけでは実行できません。

少しの JavaScript を使用する場合、これは完全に機能します。

<style>
body, html
{
    padding:0;
    margin:0;
    height:100%;
    width:100%;
}
section, header
{
    width:100%;
    display:block;
}
section
{
    background:red;
}
</style>
<script>
window.onload = window.onresize = function ()
{
    document.getElementById("section").style.height = document.body.offsetHeight - document.getElementById("head").offsetHeight + "px";
}
</script>
<header id="head">
header
<br />
two
</header>
<section id="section">
scroll the rest
</section>
于 2010-05-02T15:40:44.013 に答える