7

小さなヘッダーとその下にスクロール可能な div がある固定位置のサイドバーを作成しようとしています。

私の問題は、div 全体をスクロールできないため、その中のすべてが表示されないことです。

これが私のコードで、ここでは jsfiddle にあります。

HTML

<section>
<header>we have some text here
    <br>a few lines
    <br>doesn't matter
    <br>
</header>
<div class="scroll-box">FIRST LINE
    <br>a few lines
    <br>doesn't matter
    <br>we have some text here
    <br>a few lines
    <br>doesn't matter
    <br>we have some text here
    <br>a few lines
    <br>doesn't matter
    <br>we have some text here
    <br>a few lines
    <br>doesn't matter
    <br>we have some text here
    <br>a few lines
    <br>doesn't matter
    <br>we have some text here
    <br>a few lines
    <br>doesn't matter
    <br>we have some text here
    <br>a few lines
    <br>doesn't matter
    <br>we have some text here
    <br>a few lines
    <br>doesn't matter
    <br>we have some text here
    <br>a few lines
    <br>doesn't matter
    <br>we have some text here
    <br>a few lines
    <br>doesn't matter
    <br>we have some text here
    <br>a few lines
    <br>doesn't matter
    <br>we have some text here
    <br>a few lines
    <br>LAST LINE
    <br>
</div>

CSS

    section {
    position: fixed;
    top:0;
    left: 0;
    height: 100%;
    width: 300px;
    background: red;
}
.scroll-box {
    overflow: scroll;
    height: 100%;
    width: 100%;
    background: #eee;
}

ありがとう

4

2 に答える 2

4

問題はここにあります：

.scroll-box {
   height:100%;
}

height領域を占有するセクションにもヘッダーがあるため、 を 100% に設定することはできません。

合計 100% を と に分配しheaderます。.scroll-box

section header{
  height:30%;
}
.scroll-box {
  overflow: auto;
  height:70%;
  background: #eee;
}

デモを見るhttp://jsfiddle.net/9V45d/8/

于 2013-11-01T19:37:44.433 に答える
0

クラススクロールボックスでdivのサイズを画面のサイズの100％に設定しています。ヘッダーがページのスペースを占有しているため、スクロール領域がトリミングされています。

css を次のように変更した場合:

.scroll-box {
    overflow: scroll;
    height: 91%;
    width: 100%;
    background: #eee;
}

スクロール ボックス全体とすべての値を表示できます。したがって、ヘッダーとスクロールの間で 100% を分配する必要があります

于 2013-11-01T19:34:02.543 に答える