时间戳

首页 > 解决方案 > CSS：粘性、弹性和溢出

css - CSS：粘性、弹性和溢出

问题描述

我一直在环顾四周，发现在使用 Sticky 和 ​​Overflow 时这是一个众所周知的情况，但我仍然没有得到解决方案，可能也是因为使用了 Flex。

我的项目中有一个旁白，display:Flex;我position:Sticky;试图在内容溢出时使其可滚动。

整个网页是用 Grid 构建的，因为我希望旁边占据其列的全部高度，所以我给了它flex:1;

HTML

    <aside class="aside">
        <nav class="aside-menu">
                <ul class="aside-menu__ul">
                    <li class="aside-menu__li">title</li>
                    <li class="aside-menu__li"><img src="" alt=""></li>
                    <li class="aside-menu__li">description</li>
                </ul>
        </nav>
    </aside>

CSS

.aside{
        position: sticky;
        top:14%;
        overflow-y: scroll;
        grid-row: 3 / 4;
        grid-column: 2 / 3;
        display: flex;
        flex-direction: column;
        flex: 1;
}

现在，当我向下滚动时，使用此代码会发生以下情况：

图片

粘性根本不起作用。提前致谢。

标签： cssflexboxoverflowsticky

解决方案

你的信息还不够，你给网格设置的高度是多少，在我看来肯定不是一个特定的数字，对吧？
所以设置 flex: 1 是不够的。旁边将占用它需要的所有空间。Sticky 正在工作，但现在很想看到它。
尝试设置height: 80vh;以查看差异。

推荐阅读