0
私も同様の質問をしましたが、ここでやりたいことほど単純に入れていません。ページ全体ではなくdivをスクロールしてください
CSSを使用して、左側のペイン（ナビゲーションリンクがある）、ヘッダーバー、およびスクロールバー付きのコンテンツペインの3つのセクションにページを切り分けたいと思います。私は、ウィンドウのサイズを事前に知っているわけではないので、できるだけ比例サイズ（例えば15％）を使用したいと考えています。
問題が発生するのは、コンテンツペインにオーバーフローがある場合はスクロールバーを表示することです。ページのヘッダーまたは左側のナビゲーション部分を移動することなく、divをスクロールできるようにしたいと考えています。
私はこの種のことをJavascriptの助けを借りて行い、イベントハンドラのサイズを変更しましたが、それは簡単なCSSではできないと信じるのは難しいと思っています...？
これまでのところ、this jfiddleには何がありますか。ご覧のように、コンテンツペインでオーバーフローが発生すると、ページ全体のスクロールバーが表示されますが、コンテンツペインだけでは表示されません。これを修正する方法についてのアドバイスは、特にCSSだけでは分かります。ありがとう！
jsfiddleにアクセスすることが問題になった場合のコードブローを貼り付ける。 HTML：
<html>
<head>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
<div class="layout-wrapper">
<div class="left-pane"></div>
<div class="right-pane">
<div class="right-pane-header"></div>
<div class="right-pane-content">
<h4>Lo, a list:</h4>
<ol>
<li>A list item.</li>
<li>A list item.</li>
<li>A list item.</li>
<!-- etc etc -->
</ol>
</div> <!-- right-pane-content -->
</div> <!-- right-pane -->
</div> <!-- layout-wrapper -->
</body>
</html>
そして、ここでは、CSSです：
html {
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
border: 0;
}
body {
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
border: 0;
background-image: url("http://hd-wall-papers.com/images/wallpapers/hd-website-backgrounds/hd-website-backgrounds-20.jpg");
/*overflow-y: hidden;*/
}
.layout-wrapper {
display: table;
width: 100%;
min-height: 100%;
background-image: inherit;
}
.left-pane {
display: table-cell;
width: 15%;
min-height: 100%;
background-color: #ffe0b0;
}
.right-pane {
display: table-cell;
width: 85%;
height: 100%;
min-height: 100%;
background-image: inherit;
}
.right-pane-header {
display: block;
height: 100px;
width: 100%;
background-color: #ffb0b0;
}
.right-pane-content {
display: block;
width: 100%;
background-image: inherit;
overflow-y: auto;
}
おかげで再び！
セットの高さの長さの100％を占めることができます..オーバーフローして体に隠れる – Manjunath
しかし、私はあらかじめ高さを知らない - ヘッダーバーの下に「何が残っていてもよい」ようにしたい。これは、ユーザーがウィンドウのサイズをどのようにしているかによって異なります。 –
そのnセットに対して動的にjavascriptを使用してください – Manjunath