gpt4 book ai didi

css - Div 高度 100% 导致溢出问题

转载 作者:行者123 更新时间:2023-11-28 13:17:04 25 4
gpt4 key购买 nike

我最近决定放弃表并在这个新元素上使用 div 解决方案,但是当我将另一个 div 中的 div 设置为 100% 而不会导致溢出等于 div 的高度时,我遇到了一个非常奇怪的问题它上面。它的行为就像浏览器不知道它上面的 div 占用了那个空间。

我有一个包装器 div,其宽度和高度设置为 100%,其中有 3 列 div(左、中和右),在中间列我有 3 个 div,顶部 2 个具有固定高度 90px 和3rd 设置为 100% 以填充内容区域的其余部分,但它超出了包装器 div 并导致恰好 180px 溢出。我在 JSFiddle 上设置了这个简单的布局:Height: 100% Div Issue

<body>
<div class="wrapper">
<div class="left">
<div style="background-color:fuchsia; height: 90px;">&nbsp;</div>
</div>
<div class="mid">
<div style="background-color:purple; height: 90px; width: 998px;">&nbsp;</div>
<div style="background-color:blue; height: 90px; width: 998px;">&nbsp;</div>
<div style="background-color:black; height: 100%; width: 50%;">&nbsp;</div>
</div>
<div class="right">
<div style="background-color:fuchsia; height: 90px;" class="right">&nbsp;</div>
</div>
</div>

您会注意到黑色 div 正在从黄色(中间)div 中脱离出来,这不应该发生!任何帮助将不胜感激。谢谢!

最佳答案

您在黑色 div 上指定了 100% 的高度,它最终是相对于其父级 (.mid) 的,它也恰好包含您指定 90px 高度的其他元素到。你必须考虑到那两个 sibling 。

您可以使用 calc() 来做到这一点表示法,尽管移动浏览器支持很差,并且 IE8 及以下版本不支持该功能。

http://jsfiddle.net/KtUgF/5/

您还可以在黑色 div 上使用负的上边距,等于其两个兄弟项 (180px) 的总和:

http://jsfiddle.net/yrfnc/

关于css - Div 高度 100% 导致溢出问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17181094/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com