[英]Child element changing parent element height (css)
I'm trying to make the div not expand over user visibility, but when I dock multiple items in this div, it expands off screen.我试图让 div 不扩展到用户可见性,但是当我在这个 div 中停靠多个项目时,它会扩展到屏幕外。
Here is an example.这是一个例子。
I know, it sounds long, but I was trying to reproduce the entire layout to find the problem.我知道,这听起来很长,但我试图重现整个布局以找到问题所在。
<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/ https://jsfiddle.net/ricardosc12/rb2kjtfh/12/
change the variable quant -> 50 and you will see the problem改变变量 quant -> 50 你会看到问题
Probably its height setting to 100% ignores its adjacent element, but how can I make it take up the remaining space without expanding later.可能它的高度设置为 100% 会忽略它的相邻元素,但是我怎样才能让它占用剩余的空间而不会在以后扩展。
As you can see in the example, the email-list class has expanded over content, pushing all the main ones down.正如您在示例中看到的,电子邮件列表类扩展了内容,将所有主要内容向下推。
I'm looking for a solution to this using flex, but can you suggest other possibilities.我正在寻找使用 flex 的解决方案,但您能否提出其他可能性。
I looked around but it didn't work.我环顾四周,但没有用。
Make a div fill the height of the remaining screen space 使 div 填充剩余屏幕空间的高度
It's not the perfect answer but will solve your problem.这不是完美的答案,但会解决您的问题。 change your height of content-dash to this
将内容破折号的高度更改为此
.content-dash{
height: calc(100vh - 140px) ;
padding: 25px;
background: #EEEEEE;
}
We will make the content-dash's height to 100vh and subtract the height of head-dash and head from it.我们将 content-dash 的高度设为 100vh 并从中减去 head-dash 和 head 的高度。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.