溢出：滾動不顯示整個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

回答

相關問題