Bootstrap 3グリッドを使用して2つの独立してスクロール可能な列（左と右）を作成しようとしています。これは、ブラウザーのウィンドウサイズに応じて高さを動的に変更し、ナビゲーションバーのトップパディングで100pxオフセットされます。現時点では、固定の高さ（600px）を設定する必要がありますが、これは明らかにさまざまな画面サイズでうまくスケーリングされません。
CSS：
.left {
height: 600px;
overflow: auto;
}
.right {
height: 600px;
overflow: auto;
}
HTML：
<div class="row">
<div class="col-md-9 left scrollable">
// Content Left Column
</div>
<div class="col-md-3 right scrollable">
// Content Right Column
</div>
</div>
私はすでにそれらを#testdivに入れて、Javscript / jQueryソリューションでその高さを変更しようとしましたが、これは機能していないようです。
$('#testdiv').height($(window).height() - 100)
あなたのアドバイスをいただければ幸いです。
私はこれがあなたが達成しようとしていることだと思います：
これはcsscalcを使用して、2つの左右の列の高さをウィンドウの100％からナビゲーションバーの高さを引いたものに設定します（私はhtml5を使用<aside>しましたが、必要に応じてクラスでdivタグを使用できない理由はありません）。
要素の高さは、高さが設定されている親要素に依存することを忘れないでください。したがって、この場合、100vhを使用してhtmlと本体の高さをウィンドウの高さの100％に設定します。これにより、ページ全体の高さがウィンドウの高さに制限されます。メインコンテンツに独立したスクロール動作（オーバーフローから：自動）を持たせたくない場合は、代わりにhtml / bodyの高さを100％に設定します。
デモcss / htmlのコアエッセンスは次のとおりです。
CSS：
body, html {
height: 100vh;
margin: 0;
padding: 0;
}
nav {
background-color: palegreen;
height: 100px;
}
main, aside {
overflow: auto;
height: calc(100% - 100px);
float: left;
}
main {
width: 50%;
background-color: pink;
}
aside {
width: 25%;
background: #ccc;
}
HTML：
<nav>
Navigation
</nav>
<aside>
Left Aside
</aside>
<main>
Main Content
</main>
<aside>
Right Aside
</aside>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加