Question

我试图让 div 不扩展到用户可见性，但是当我在这个 div 中停靠多个项目时，它会扩展到屏幕外。

这是一个例子。

我知道，这听起来很长，但我试图重现整个布局以找出问题所在。

<body>
    <div class="container">
        <div class="head"></div>
        <div class="main">
            <div class="painel"></div>
            <div class="dash">
                <div class="head-dash"></div>
                <div class="content-dash">
                    <div class="email-list">
                        <div class="head-content"></div>
                        <div class="content">
                            <div class="item"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

https://jsfiddle.net/ricardosc12/rb2kjtfh/12/

改变变量quant -> 50，你会看到问题

可能它的高度设置为 100% 忽略了它的相邻元素，但是我怎样才能让它占用剩余的空间而不用以后扩展。

正如您在示例中所看到的，电子邮件列表类扩展了内容，将所有主要内容向下推。

我正在寻找使用 flex 的解决方案，但您能否提出其他可能性。

我环顾四周，但没有用。

Make a div fill the height of the remaining screen space

Answer 1

这不是完美的答案，但可以解决您的问题。将内容破折号的高度更改为此

.content-dash{
    height: calc(100vh - 140px) ;
    padding: 25px;
    background: #EEEEEE;
}

我们将 content-dash 的高度设为 100vh，并从中减去 head-dash 和 head 的高度。

子元素改变父元素高度（css）

1 个答案: