Question

我有一个包装器，其中包含两个 divs 。我希望内容是固定的，所以不能滚动。侧边栏包含用户名列表，因此通过 y 滚动浏览，它具有很大的内容。

我尝试了很多方法，例如添加了 display：auto; ，但是它一直在滚动整个页面。

这是我的HTML文件的外观。

<div class="wrapper">

    <!-- Sidebar  -->
    <div id="sidebar">
        <div class="sidebar-header"></div>

        <div class="sidebar-filter"></div>

        <ul class="list-unstyled components"></ul>
    </div>

    <!-- Page Content  -->
    <div id="content">
        CONTENT
    </div>

</div>

这是CSS文件。

.wrapper {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
}

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

虽然看起来很简单，但是我在这个问题上呆了2天。

Answer 1

使用overflow-y: scroll;并将固定的height（例如：height: 120px;）设置为#sidebar

编辑！

对您发表评论

我希望边栏全高，

使用height:100vh

.wrapper {
    display: flex;
    width: 100%;
    align-items: flex-start;
}

#sidebar {
    min-width: 250px;
    max-width: 250px;
    background: #7386D5;
    color: #fff;
    transition: all 0.3s;
        overflow-y: scroll;
            height: 100vh;
}

#content {
    width: 100%;
    padding: 20px;
    min-height: 100vh;
    transition: all 0.3s;
}

<div class="wrapper">

    <!-- Sidebar  -->
    <div id="sidebar">
        <div class="sidebar-header"></div>

        <div class="sidebar-filter"></div>

        <ul class="list-unstyled components">
        <li>user name</li>
        <li>user name</li>
        <li>user name</li>
        <li>user name</li>
        <li>user name</li>
        <li>user name</li>
        <li>user name</li>
        <li>user name</li>
        </ul>
    </div>

    <!-- Page Content  -->
    <div id="content">
        CONTENT
    </div>

</div>

在Flex内容中仅滚动侧栏

1 个答案: