css 溢出自动不显示滚动条

7uhlpewt 于 2024-01-09 发布在其他

关注(0)|答案(2)|浏览(168)

我有一个网格父级，有2列。左边的子级与父级的高度相同（这里是100vh），右边的子级是1000px，大于父级。
超文本标记语言：

<body>
    <div class="leftcol"></div>
    <div class="rightcol"></div>
</body>

字符串
CSS：

body{
    background-color: white;
    display: grid;
    grid-template-columns: 2fr 3fr;
    margin: 0;
    overflow: hidden;
}

.leftcol {
    background-color: grey;
    height: 100vh;
    width: 100%;
}

.rightcol {
    background-color: black;
    height: 1000px;
    width: 100%;
    overflow: auto;
}

型
我只希望右边的子对象是可滚动的，因为它的高度大于父对象，左边的子对象将保持静止。我看过一些其他的帖子，他们建议在子对象上使用overflow：auto，但我的不起作用。
有谁能告诉我哪里做错了吗？谢谢。

css

来源：https://stackoverflow.com/questions/69654887/overflow-auto-not-showing-scrollbar

2条答案

按热度按时间

e5njpo681#

试试

<body>
    <div class="leftcol">
        <p class="top">top</p>
        <p class="bottom">bottom</p>
    </div>
    <div class="rightcol">
        <p class="top">top</p>
        <p class="bottom">bottom</p>
    </div>
</body>

<style type="text/css">
    body{
        background-color: white;
        display: grid;
        grid-template-columns: 2fr 3fr;
        margin: 0;
    }

    .leftcol{
        background-color: grey;
        height: 100vh;
        width: 50%;
        position: fixed;
        left: 0;
        top: 0;
    }

    .rightcol{
        background-color: black;
        height: 1000px;
        width: 50%;
        position: absolute;
        right: 0;
        top: 0;
    }
    .leftcol p,
    .rightcol p {
        text-align: center;
        color: #fff;
    }
    .rightcol p.top {
        top: 0;
    }
    .rightcol p.bottom {
        bottom: 0;
        padding-top: 900px;
    }
    .leftcol p.bottom {
        padding-top: 80vh;
    }
</style>

字符串

赞(0）回复(0）举报 2024-01-09

6psbrbz92#

没有滚动条，因为你不需要滚动。如果你想显示滚动条，你可以用overflow: scroll;替换overflow: auto;。这使得它无论如何都显示滚动条。
你可以在这里了解更多关于溢出的信息：https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content

赞(0）回复(0）举报 2024-01-09

我来回答

css 溢出自动不显示滚动条

2条答案

相关问题

热门标签

最新问答