时间戳

首页 > 解决方案 > CSS - 溢出-y：滚动；不能滚动并获得> 100％的块高度

html - CSS - 溢出-y：滚动；不能滚动并获得> 100％的块高度

问题描述

我需要在里面制作 y 轴可滚动块left-navbar。并且这个块的高度必须填满left-navbar. 这样，该left-navbar高度是页面的 100%，仅此而已。

但是history-overflow 是不可滚动的，并且所有history-item元素都显示出来了，所以它们使所有left-navbar高度都大于页面高度。

此外，当页面高度缩小时，history-overflow应仅填充可用空间以使left-navbar高度不超过 100%。这个怎么做？

Codepen 沙箱示例： https ://codepen.io/car1ot/pen/zYqLqKB

HTML 代码：

<div className="left-navbar">
    <div className="history">
        <label>History</label>
        <div className="history-overflow">
            <div className="history-item">*...some content here...*</div>
            *...more history-item(s) here...*
        </div>
    </div>
</div>

CSS（scss）代码：

div.left-navbar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 290px;
    height: 100%;
    padding: 25px 20px;
    box-sizing: border-box;

    div.history {
        display: flex;
        flex-direction: column;

        div.history-overflow {
            margin-top: 8px;
            margin-right: -20px;
            padding-right: 14px;
            overflow-y: scroll;

            div.history-item {
                display: flex;
                align-items: center;
                flex-shrink: 0;
                padding: 0 16px 0 6px;
                height: 40px;
                width: 100%;
                border-radius: 7px;
                margin-bottom: 8px;
                box-sizing: border-box;
            }
        }
    }
}

标签： htmlcsssass

解决方案

如果您设置overflow: hidden为.history和max-height: 100vh，.left-navbar我认为它可以满足您的要求。虽然不确定在您的完整布局的上下文中（也许您不想使用 100vh 但那里的值不同）。重要的是你必须在某处限制高度。

推荐阅读