html - CSS固定位置菜单-调整浏览器大小时滚动问题

我有一个固定位置的导航菜单。当浏览器高度较小时，它允许滚动列表项，但由于某种原因，最后一项始终不在屏幕上。

这是fiddle

的HTML

<div>Header</div>
<ul>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
    <li>Page 4</li>
    <li>Page 5</li>
</ul>

的CSS

div {
    position: fixed;
    height: 50px;
    background: black;
    width: 50%;
    color: white;
    line-height: 50px;
    text-align: center;
}
ul {
    position: fixed;
    list-style: none;
    width: 50%;
    padding: 0;
    border: 0;
    outline: 0;
    margin: 50px 0 0 0;
    background: green;
    height: 100%;
    max-height: 250px;
}
li {
    min-height: 50px;
    line-height: 50px;
    text-align: center;
    outline: auto;
}
li:hover {
    background: rgba(0,0,0,.5);
}
@media (max-height: 300px){
    ul {
        overflow: scroll;
    }
}

最佳答案

在CSS的ul下，将height:100%更改为：

width: calc(100% - 60px);

之所以起作用，是因为div干扰了ul的固定位置。

如果您对浏览器的支持很大，则可以执行以下操作：

padding-right: 60px;
width: 50%;
-moz-box-sizing: border-box;
box-sizing: border-box;

但这在IE5.5（hehehe）上不起作用，因此您也可以

width: expression(50% - 60px);

（这会使它有点变形）
但是有趣的是，您可以同时做所有事情！ （按expression, calc, paddingWidthSizingBox的顺序）

而且，如果您担心仍在使用IE 4＆
这是小提琴：http://jsfiddle.net/hw9LW/1/

[编辑]
Here is the updated fiddle