html - 如果侧边菜单的高度超过窗口，如何固定？

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”使菜单的位置“固定”将是致命的。因为即使您滚动该页面，您也永远不会看到菜单的“过度 float ”区域。 (即使属性“溢出:滚动”也帮不了你。)

为了可视化，我使用了您的示例。页面访问者将无法看到标记为 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;
    }
}

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

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