Question

我正在尝试使这个汉堡菜单（当页面宽度小于 865 像素时可见）滚动以在屏幕上显示 VH 溢出的任何内容，但屏幕高度不足以立即显示整个菜单。根据我的理解，通过为下拉部分本身设置一个固定的高度，像 calc(100vh - *header-strip-height*) 结合应用于 overflow-y: scroll; 的 #header_menus 应该可以工作，但是，因为 #header_menus div 是一个顶部条带的子元素，顶部条带具有定义的高度，设置 overflow-y: scroll; 似乎强制下拉段只占用条带菜单的 VH，并在条带菜单的范围内滚动，而不是占据网站的整个右侧，在我尝试过的所有解决方案中，我还没有得出一些不会干扰正文相对于标题的位置的东西，标题在代码笔中由placekitten 图片。

寻找关于如何允许下拉汉堡菜单在垂直溢出时滚动的建议，而不会以任何方式干扰正文的方式破坏标题布局，想法？

https://codepen.io/roomwillow/pen/BaWQoVJ

Answer 1

导航上设置的固定高度引起的问题。

为了解决这个问题，您可以在菜单上设置一个 absolute 位置，当视口低于 865 像素时。

因此：

#header_menus {
    background-color: black;
    padding-right: 1rem;
    padding-left: 2rem;
    overflow: auto;
    position: absolute;
    height: calc(100vh - 5.5rem);
    top: 5.5rem;
    right: 0;
}

请确保添加相对于父级的内容，以免弄乱页面：

#header_right_section {
    position: relative;
}

这将使它起作用。 https://jsfiddle.net/5zjw1b6h/

垂直溢出时滚动菜单

1 个答案: