僅製作一個部分可滾動，而不是整個頁面

Question

我正在處理一個項目，其中一個部分通過從數據庫請求數據來填充元素，因此其中的元素數目極其可變。

棘手的部分是，我們的設計基於不必在頁面上滾動的想法，而是在必要時滾動部分。我認爲在部分上使用overflow就足夠了，但它不會給我預期的結果。

我嘗試了overflow屬性的所有變體，scroll顯示一個滾動條，但它似乎被凍結。

如何讓section-one在本身內部滾動，而不會使頁面的其餘部分滾動？

我創建了一個代碼筆與虛擬版本來演示該問題：http://codepen.io/leofontes/pen/aNaBox

body { 
 
    overflow: hidden; 
 
} 
 

 
main { 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
.section-one { 
 
    background-color: #FF0000; 
 
    float: left; 
 
    min-height: 1400px; 
 
    overflow: visible; 
 
    width: 15%; 
 
} 
 

 
.section-two { 
 
    background-color: #00FF00; 
 
    float: left; 
 
    min-height: 1400px; 
 
    width: 70%; 
 
} 
 

 
.section-three { 
 
    background-color: #0000FF; 
 
    min-height: 1400px; 
 
    float: left; 
 
    width: 15%; 
 
}

<main> 
 
    <section class="section-one"> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    </section> 
 
    <section class="section-two"> 
 
    <p>this is section two</p> 
 
    </section> 
 
    <section class="section-three"> 
 
    <p>this is section three</p> 
 
    </section> 
 
</main>

謝謝

Answer 1

進行這些調整你的CSS：

html { 
 
    height: 100%;      /* note #1 */ 
 
} 
 
body { 
 
    height: 100%;      /* note #1 */ 
 
    margin: 0;       /* note #2 */ 
 
    overflow: hidden; 
 
} 
 
main { 
 
    margin: 0; 
 
    height: 100%; 
 
} 
 
.section-one { 
 
    background-color: #FF0000; 
 
    float: left; 
 
    overflow-y: auto;     /* new */ 
 
    width: 15%; 
 
    height: 100%;      /* note #3 */ 
 
} 
 
.section-two { 
 
    background-color: #00FF00; 
 
    float: left; 
 
    min-height: 1400px; 
 
    width: 70%; 
 
} 
 
.section-three { 
 
    background-color: #0000FF; 
 
    min-height: 1400px; 
 
    float: left; 
 
    width: 15%; 
 
}

<main> 
 
    <section class="section-one"> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    <p>this is section one</p> 
 
    </section> 
 
    <section class="section-two"> 
 
    <p>this is section two</p> 
 
    </section> 
 
    <section class="section-three"> 
 
    <p>this is section three</p> 
 
    </section> 
 

 
</main>

Revised Codepen

注：

1. When using percentage heights, parent elements must have a specified height.
2. Remove the default margin from the body element.
3. 添加height到元件使overflow工作。