Question

当其中一个剧透打开时，我需要在汉堡菜单中滚动溢出。

我在容器中添加了 overflow: auto 和 height，但它不起作用。

HTML

<div class="burger-menu-container">
    <nav class="burger-menu">
        <div class="spoiler-mob">
            <div class="spoiler-mob-item"><a>Header 1</a></div>
            <div class="spoiler-mob-data" id="spoiler-mob-data">
                <a href="">link1</a><br>
                <a href="">link2</a><br>
                <a href="">link3</a><br>
                <a href="">link4</a>
            </div>
        </div>
        <div class="spoiler-mob">
            <div class="spoiler-mob-item">
            <a>Header 2</a>
            </div>
            <div class="spoiler-mob-data" id="spoiler-mob-data">
                <a href="">link1</a><br>
                <a href="">link2</a><br>
                <a href="">link3</a><br>
                <a href="">link4</a>
            </div>
        </div>                                    
        <div><a>Header 3</a></div>
        <div class="spoiler-mob">
            <div class="spoiler-mob-item"><a>Header 4</a></div>
            <div class="spoiler-mob-data" id="spoiler-mob-data">
                <a href="">link1</a><br>
                <a href="">link2</a><br>
                <a href="">link3</a>
            </div>
        </div>
        <div><a>Header 5</a></div>
    </nav>
</div>

CSS

    .burger-menu-container {
        display: none;
        position: absolute;
        height: 17rem;
        overflow: auto;
    }
    
    .burger-menu {
        position: absolute;
        height: 100%;
        display: flex;
    }

Answer 1

Here 您可以找到更多信息。但是，为了回答您的问题，这将是您的情况下可能的修复方法。

您在 .burger-menu 类和 overflow-y: scroll 上添加固定高度。它将以这种方式工作，但您将拥有可能会打扰您的固定高度（这取决于您）。
您将移动菜单上的菜单设置为绝对定位，宽度和高度为 100%，但我认为您必须将其从现在的位置移动，以使其绝对定位，相对于身体。

或者您保持原样，因为根据菜单中当前的链接数量，不会出现菜单不适合的情况（在浏览网站时、在移动设备上、在纵向模式下）视口。您在屏幕尺寸为 768x393 的图像中呈现的情况根本不会发生。

汉堡菜单中的滚动溢出

1 个答案: