divレイアウトのサイズ変更クエリ

Question

これはかなり基本的な問題ですが、別の部品を追加してレイアウトが正常に動作しなくなるまで、見栄えの良いサイトをまとめました。原則は、私が挿入したコードと同じです。したがって、私のヘッダー、navbarとフッターは固定された高さを持ち、残りのスペースはコンテンツが残りますが、フッタを押し下げるのではなく、コンテンツがブラウザの高さを超えた場合、重なるだけです。これを行う正しい方法は何ですか？私は、コンテンツがブラウザーの高さより低くなるまでOKである絶対的な配置ではなく、相対的なものを使用しているので、フッターがページの途中まで移動します。

ありがとうございます。以下のような

#content上

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#header { 
 
    position: absolute; 
 
    width:100%; 
 
    height:40px; 
 
    background:red; 
 
} 
 
#nav { 
 
    position: absolute; 
 
    top:40px; 
 
    width:100%; 
 
    height:25px; 
 
    background:blue; 
 
} 
 
#content { 
 
    position: absolute; 
 
    top:65px; 
 
    bottom:40px; 
 
    width:100%; 
 
    height:100%; 
 
    background:yellow; 
 
} 
 
#footer { 
 
    position: absolute; 
 
    bottom:0; 
 
    width:100%; 
 
    height:40px; 
 
    background:green; 
 
}

<div id="header"></div> 
 
<div id="nav"></div> 
 
<div id="content"> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
</div> 
 
<div id="footer"></div>

Answer 1

使用min-height、：

#content { 
    min-height: calc(100vh - 105px); /* Total window height minus the #nav, #header & #footer height */ 
} 

は、以下の作業スニペットを見てください：

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#header { 
 
    width:100%; 
 
    height:40px; 
 
    background:red; 
 
} 
 
#nav { 
 
    top:40px; 
 
    width:100%; 
 
    height:25px; 
 
    background:blue; 
 
} 
 
#content { 
 
    top:65px; 
 
    bottom:40px; 
 
    width:100%; 
 
    height:100%; 
 
    background:yellow; 
 
    min-height: calc(100vh - 105px); 
 
} 
 
#footer { 
 
    width:100%; 
 
    height:40px; 
 
    background:green; 
 
}

<div id="header"></div> 
 
<div id="nav"></div> 
 
<div id="content"> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
</div> 
 
<div id="footer"></div>

希望すると便利です。

Answer 2

位置を適用することをお勧めします：ヘッダーのナビゲーションとフッターに固定され、これらの要素が常にブラウザー上の同じ位置にとどまるようにします。コンテンツは静的に配置でき、コンテンツに基づいて調整されます。コードを少し変更して確認してください。このため

body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#header { 
 
    position: fixed; 
 
    top: 0; 
 
    width:100%; 
 
    height:40px; 
 
    background:red; 
 
} 
 
#nav { 
 
    position: fixed; 
 
    top:40px; 
 
    width:100%; 
 
    height:25px; 
 
    background:blue; 
 
} 
 
#content { 
 
    width:100%; 
 
    min-height:100%; 
 
    background:yellow; 
 
    margin: 65px 0 40px; 
 
} 
 
#footer { 
 
    position: fixed; 
 
    bottom:0; 
 
    width:100%; 
 
    height:40px; 
 
    background:green; 
 
}

<div id="header"></div> 
 
<div id="nav"></div> 
 
<div id="content"> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
text here.....<br> 
 
</div> 
 
<div id="footer"></div>