[英]Child element changing parent element height (css)
我试图让 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 的解决方案,但您能否提出其他可能性。
我环顾四周,但没有用。
这不是完美的答案,但会解决您的问题。 将内容破折号的高度更改为此
.content-dash{
height: calc(100vh - 140px) ;
padding: 25px;
background: #EEEEEE;
}
我们将 content-dash 的高度设为 100vh 并从中减去 head-dash 和 head 的高度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.