溢出固定格內的div

Question

非常多我已經有我想要的東西。 overflow-y我希望能夠滾動瀏覽div＃滾動屏幕內的內容，但一旦出現溢出，它將不會向下滾動到選項8，從而不可見。爲什麼會這樣，我該如何解決？

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#fixed { 
 
    width: 300px; 
 
    height: 100%; 
 
    max-height: 345px; 
 
    position: fixed; 
 
    background: #333; 
 
    border: 2px solid #333; 
 
} 
 
#menu { 
 
    background: pink; 
 
    line-height: 25px; 
 
    padding-left: 20px; 
 
} 
 
#scrollable { 
 
    position: absolute; 
 
    height: 100%; 
 
    width: 100%; 
 
    overflow-y: auto; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 
ul li a { 
 
    color: white; 
 
    line-height: 40px; 
 
    padding-left: 20px; 
 
    display: block; 
 
} 
 
ul li a:hover { 
 
    background: blue; 
 
}

<div id="fixed"> 
 
    <div id="menu"> 
 
    Hello 
 
    </div> 
 
    <div id="scrollable"> 
 
    <ul> 
 
     <li><a>Option 1</a></li> 
 
     <li><a>Option 2</a></li> 
 
     <li><a>Option 3</a></li> 
 
     <li><a>Option 4</a></li> 
 
     <li><a>Option 5</a></li> 
 
     <li><a>Option 6</a></li> 
 
     <li><a>Option 7</a></li> 
 
     <li><a>Option 8</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

https://jsfiddle.net/3hm1rxut/2/

Answer 1

你需要計算#scrollable div的高度與calc()，因爲在此菜單中還利用它的一些空間，使#scrollable沒有得到DIV的100％高度。

height: calc(100% - 30px);

* { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
#fixed { 
 
    width: 300px; 
 
    height: 100%; 
 
    max-height: 345px; 
 
    position: fixed; 
 
    background: #333; 
 
    border: 2px solid #333; 
 
} 
 
#menu { 
 
    background: pink; 
 
    line-height: 25px; 
 
    padding-left: 20px; 
 
} 
 
#scrollable { 
 
    position: absolute; 
 
    height: calc(100% - 30px); 
 
    width: 100%; 
 
    overflow-y: auto; 
 
} 
 

 
ul { 
 
    list-style: none; 
 
} 
 
ul li a { 
 
    color: white; 
 
    line-height: 40px; 
 
    padding-left: 20px; 
 
    display: block; 
 
} 
 
ul li a:hover { 
 
    background: blue; 
 
}

<div id="fixed"> 
 
    <div id="menu"> 
 
    Hello 
 
    </div> 
 
    <div id="scrollable"> 
 
    <ul> 
 
     <li><a>Option 1</a></li> 
 
     <li><a>Option 2</a></li> 
 
     <li><a>Option 3</a></li> 
 
     <li><a>Option 4</a></li> 
 
     <li><a>Option 5</a></li> 
 
     <li><a>Option 6</a></li> 
 
     <li><a>Option 7</a></li> 
 
     <li><a>Option 8</a></li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

有多種方式來實現你的問題。我會這樣做：

在#scrollable div上添加填充頂部並使#menu div絕對。添加一個z-index到#menu股利，因此它保持在頂部。此外，請確保在所有元素上添加box-sizing: border-box以防止超出指定的大小。

* { 
    margin: 0; 
    padding: 0; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
} 
#fixed { 
    width: 300px; 
    height: 100%; 
    max-height: 345px; 
    position: fixed; 
    background: #333; 
    border: 2px solid #333; 
} 
#menu { 
    background: pink; 
    line-height: 25px; 
    padding-left: 20px; 
    position: absolute; 
    width: 100%; 
    z-index: 10; 
} 
#scrollable { 
    position: absolute; 
    height: 100%; 
    width: 100%; 
    overflow-y: auto; 
    padding-top: 25px; 
} 

ul { 
    list-style: none; 
} 
ul li a { 
    color: white; 
    line-height: 40px; 
    padding-left: 20px; 
    display: block; 
} 
ul li a:hover { 
    background: blue; 
} 

Answer 3

更改此

#scrollable { 
    position: absolute; 
    height: calc(100% - 20px);/* height shall not be 100% but rather (100%) - (half the line-height of li)*/ 
    width: 100%; 
    overflow-y: auto; 
}