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”将是致命的。因为即使滚动该页面，您也永远不会看到菜单的“过浮动”区域。（即使属性“溢出：滚动”也无济于事。）

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

这适用于所有现代浏览器。您仍然可以在此处添加“已修复”，但请记住用户屏幕大小的限制。

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

如果高度超过窗口，如何修复侧边菜单？

1 个答案: