如果侧边菜单的高度超过 window，如何修复它？

Question

我的页面结构如下：

--------------------     //screen begin here
- MMM CCCCCCCCCCCC -
- MMM CCCCCCCCCCCC -
- MMM CCCCCCCCCCCC -
- MMM CCCCCCCCCCCC -
- MMM CCCCCCCCCCCC -
--------------------     //screen end here.
- MMM CCCCCCCCCCCC -
-     CCCCCCCCCCCC -
-     CCCCCCCCCCCC -

所以左边的菜单MMM高度超过了屏幕的高度，而且内容ccc也超过了屏幕的长度，我想要的是让左边的菜单和内容滚动一起直到左侧菜单到达底部，然后左侧菜单应该固定并且内容继续滚动，有帮助吗？

Answer 1

仅仅通过CSS属性"position:fixed"来使菜单"fixed"的位置是致命的。因为即使您滚动该页面，您也永远不会看到菜单的 'overfloating' 区域。（连属性"overflow: scroll"都帮不了你。）

为了可视化，我使用了您的示例。页面访问者将无法看到标记为 F 的区域。

--------------------     //screen begin here
- MMM CCCCCCCCCCCC -
- MMM CCCCCCCCCCCC -
- MMM CCCCCCCCCCCC -
- MMM CCCCCCCCCCCC -
- MMM CCCCCCCCCCCC -
--------------------     //screen end here.
- FFF CCCCCCCCCCCC -
-     CCCCCCCCCCCC -
-     CCCCCCCCCCCC -

最好的解决方案是使用媒体查询，如果访问者的屏幕比您的菜单小，请修改字体大小、行高等。简单的说，把菜单区域变小。

这可能是您可以使用的 CSS 标记：

#menu{
    font-size: inherit;
    line-height: inherit;
    background: yellow;
}
@media (max-height: 1024px) {
    #menu{
        font-size: 0.8em;
        line-height: 0.8em;
        background: red;
    }
}

这应该适用于所有现代浏览器。您仍然可以在此处添加 "fixed"，但请记住用户屏幕尺寸的限制。

还有一件事。您可以使用视口大小的排版（基于高度）。更多相关信息：http://css-tricks.com/viewport-sized-typography/

如果侧边菜单的高度超过 window，如何修复它？

how make side menu fixed if its height exceeds the window?

html

css

scroll