Google で検索してもこの問題に対する簡単な答えが見つからないことに驚きましたが、スクロール コンテンツ パネルに対するほとんどの回答は、正しく機能しなかったか、ブートストラップでは機能しませんでした。
回答このようにページ全体にスクロールバーがありますが、これは間違っているようです。
私は単に 100% の高さhtmlでbodyブラウザのスクロールバーを使わず、本体のコンテンツ領域でのみスクロールが表示されるようにしようとしています。ブートストラップ メニューの高さなどに合わせて動作する必要があります。
これまでのところ、唯一機能する方法は、絶対位置のコンテンツとフッター要素を使用することです。
html {
height: 100%;
}
html body {
height: 100%;
overflow: hidden;
}
html body .container-fluid.body-content {
position: absolute;
top: 50px;
bottom: 30px;
right: 0;
left: 0;
overflow-y: auto;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 30px;
}
しかし、これは間違ったやり方のようで、Bootstrap レイアウトに悪影響を与えるようです。たとえば、メニュー行が 2 行に折り返されると、コンテンツ領域はナビゲーション バー div の下になります。
すぐに使用できる MVC Razor/Bootstrap アプリケーションと互換性のある、このスタイル設定の正しい方法を教えてください。
ノート：
- IE8 以降で動作する必要があります。
- これは Bootstrap と連携して動作する必要があるため、Boostrap が調整されると (ヘッダー/フッターのサイズ)、自動的に修正されます。
アップデート：
使用する JSFiddle は次のとおりです (以下の回答からの最新のソリューションを含む)。
ベストアンサー1
デフォルトのスクロールを無効にするには、次の CSS を追加します。
body {
overflow: hidden;
}
#contentコンテンツ本体のみをスクロールするには、CSS を次のように変更します。
#content {
max-height: calc(100% - 120px);
overflow-y: scroll;
padding: 0px 10%;
margin-top: 60px;
}
編集：
実際のところ、CSS は機能しているようなので、どのような問題に直面していたのかわかりません。HTML とヘッダーの CSS ステートメントのみを追加しました。
html {
height: 100%;
}
html body {
height: 100%;
overflow: hidden;
}
html body .container-fluid.body-content {
position: absolute;
top: 50px;
bottom: 30px;
right: 0;
left: 0;
overflow-y: auto;
}
header {
position: absolute;
left: 0;
right: 0;
top: 0;
background-color: #4C4;
height: 50px;
}
footer {
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-color: #4C4;
height: 30px;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<header></header>
<div class="container-fluid body-content">
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
</div>
<footer></footer>