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 回答