固定高さの上部ナビゲーションバー、残りのスペースがコンテンツ用の固定幅のサイドナビゲーションバー、サイドナビを作成してコンテンツを残りの部分に埋め込む方法コンテンツペインのコンテンツがビューポートの高さを超えていても、3セクションレイアウトの動的高さ
This penは、この状況をより正確に説明します。コンテンツは#content divから引き続き表示されます。ページの残りの部分でサイドナビゲーションとコンテンツペインが表示されるようにするにはどうすればよいですか？
これは少しハックな解決策ですが、機能します。あなたはJSを使用するために喜んでいる場合は、私がハックせずに、1つを提供します：
* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
background-color: green;
}
#topNav {
height: 65px;
background-color: red;
}
#sideNav {
width: 200px;
float: left;
background-color: green;
height: 100%;
}
#content {
background-color: blue;
display:inline-block;
width: calc(100% - 200px)
}
div {
text-align: center;
color: gold;
}<div id="container">
<div id="topNav">
Top Nav
</div>
<div id="sideNav">
Side Nav
</div>
<div id="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>サイドバーの背景は、それがあるとして、それが見えるように、実際にコンテナの背景であります。
これは私がJSでそれを行うだろうかです：
var sidebar = document.getElementById('sideNav');
var contentHeight = document.getElementById('content').offsetHeight + "px";
sidebar.style.height = contentHeight;
//Could you also write this in one line
//document.getElementById('sideNav').style.height = document.getElementById('content').offsetHeight + "px";* {
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0px;
padding: 0px;
}
#container {
background-color: yellow;
}
#topNav {
height: 65px;
background-color: red;
}
#sideNav {
width: 200px;
float: left;
background-color: green;
height: 100%;
}
#content {
background-color: blue;
display:inline-block;
width: calc(100% - 200px)
}
div {
text-align: center;
color: gold;
}<div id="container">
<div id="topNav">
Top Nav
</div>
<div id="sideNav">
Side Nav
</div>
<div id="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>あなたが背景グラデーションを使用して、非常に古い方法「faux columns」のアップデートを使用することができます。緑色のペンキであるbackground:linear-gradient(to right, green 200px, blue 200px);最初の200ピクセルの左側から（サイドバーとして）青が引き継ぎます：
#container {
background-color: yellow;
position: absolute;
bottom: 0;
top: 0;
left: 0;
right: 0;
}
#topNav {
height: 65px;
background-color: red;
}
#sideNav {
width: 200px;
position: absolute;
top: 65px;
bottom: 0;
background-color: green;
}
#content {
background-color: blue;
position: absolute;
top: 65px;
bottom: 0;
left: 200px;
right: 0;
}
html, body {
height: 100%;
margin: 0px;
padding: 0px;
background:linear-gradient(to right, green 200px, blue 200px);
}
div {
text-align: center;
color: gold;
}<div id="container">
<div id="topNav">
Top Nav
</div>
<div id="sideNav">
Side Nav
</div>
<div id="content">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
</div>
</div>
あなたはJSでどうやってやりますか？ –
私はコンテンツの高さを取得し、それと同じ高さにします。応答性をサポートしたくない場合は、5行のコードのようになります。 –