我已经几乎拥有了我想要的。 我希望可以通过滚动来查看
内超出屏幕范围的
overflow-y
,但一旦溢出发生,它将无法滚动到选项8,导致选项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>