css 左侧菜单 不滚动

CSS 左侧菜单是网站中常见的导航工具，它可以帮助用户快速地找到所需的内容。在很多情况下，我们希望左侧菜单不滚动，而是与页面其他部分一起固定在页面上。

/* CSS代码 */.menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    background-color: #f5f5f5;
    overflow: auto;
}
.content {
    margin-left: 200px;
}
    

上面的 CSS 代码展示了实现左侧菜单不滚动的方法。首先，我们将菜单容器的位置设置为固定的，并将其放置在页面的左侧和顶部。接下来，我们将其宽度设置为固定的值（在这个例子中是 200 像素），并给它一个背景色。

由于菜单有可能比屏幕高度高，因此我们将容器的底部设置为 0，并启用 overflow 属性，这样，在菜单内容溢出容器时，用户可以通过滚动来查看全部内容。

最后，我们使用 margin-left 属性将页面内容容器向右移动（200 像素是菜单容器的宽度），以留下足够的空间，使得菜单和内容容器不会重合。

通过上面的 CSS 代码，我们可以实现一个具有固定左侧菜单且不滚动的页面效果。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！