Question

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

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;
    }
}

Answer 1

在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（呵呵呵），所以你也可以做

width: expression(50% - 60px);

（这会扭曲一点）但有趣的是，你可以同时做所有的事情！（按顺序expression, calc, paddingWidthSizingBox）

如果你担心少数人还在使用IE 4＆amp; ＆lt;， I 不能 help 你 那里 ， 和 nobody else 可以。

~~这是小提琴：http://jsfiddle.net/hw9LW/1/~~

[编辑] Here is the updated fiddle

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

1 个答案: