溢出：滚动不显示整个div

我正在尝试创建一个固定位置的侧边栏，它具有一个小标题和一个可滚动的div。溢出：滚动不显示整个div

我的问题是，我无法滚动整个div，所以我不能看到它的一切。我的代码是here it is on 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; 
}

感谢

来源

2013-11-01 Alex

问题之间分配100％是在这里：

.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-01 19:37:44 DaniP

这似乎是问题所在。但是，我怎样才能使其响应？我知道标题的高度是多少，因为它不会改变，但我希望滚动框垂直填充屏幕的其余部分。我知道如何使用jQuery，但我不知道是否有CSS解决方案。 – Alex

我不认为它只能用于CSS，特别是用于“溢出”......他需要一个固定的高度。 – DaniP

我会用jQuery来做。谢谢！ – Alex

您与类滚动框格的大小设置为的大小的100％屏幕。头部正在占用页面上的空间，因此滚动区域被裁剪。

如果更改CSS来：

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

，你将能够看到整个滚动框和所有的值。所以，你需要的头和滚动

来源

2013-11-01 19:34:02 collusionbdbh

这只是上的jsfiddle一个例子。我在网站上使用这个，我只能看到每个分辨率的div的相同部分，所以它不是由JSFiddle引起的。 – Alex

抱歉，应该解释说，这不是因为jsfiddle，而是因为标题占用的空间。 – collusionbdbh

溢出：滚动不显示整个div

回答

相关问题