div 高度 100% 导致溢出问题答案

【问题标题】：Div height 100% causing overflow issuesdiv 高度 100% 导致溢出问题
【发布时间】：2019-10-26 23:44:47
【问题描述】：

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

我有一个固定宽度和高度设置为 100% 的包装 div，其中中间列有 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 方法这么难？
jsfiddle.net/KtUgF/7
@MarcoGeertsma 我没有看到关于那个小提琴的任何更新？
这是我创建的布局beforethecode.net/projects/ngs，所以你可以在这里看到我想要完成的内容。它没有什么突破性或复杂性，它应该非常简单，但到目前为止，尝试使用 div 重新创建这个表格布局一直是一场噩梦。

标签： css html height

【解决方案1】：

您在黑色 div 上指定了 100% 的高度，该高度最终相对于其父级 (.mid) 也恰好包含您为其指定 90px 高度的其他元素。你必须考虑这两个兄弟姐妹。

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

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

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

http://jsfiddle.net/yrfnc/

【讨论】：

感谢 Adrift 的回复，遗憾的是，我需要 IE8 支持，而上边距设置感觉就像是一种非常直接的技巧（我认为）。这个黑色 div 恰好出现在主要内容区域，所以一旦我开始用数据填充它，我必须将所有这些内容向下填充 +180px 以抵消负上边距设置。
那你需要用JS或者重新考虑你的布局

【解决方案2】：

这应该可以解决问题

height: 100vh;

【讨论】：

【解决方案3】：

为什么你不能只添加溢出：隐藏到“.mid”div？

<div class="mid" style="overflow:hidden">

或

.mid {
    float: left;
    width: 998px;
    height: 100%;
    background-color: yellow;
    overflow: hidden;
}

【讨论】：

因为该区域是我的主要内容 div。而且我需要在其中放置很多其他 UI。通过简单地将溢出设置为隐藏，我将隐藏我的内容！我需要它与屏幕上的实际空间一致，以便它可以在需要时垂直扩展，并且在 div 本身内部没有滚动。
那么你仍然需要填充你提到的负边距技巧。如果您不希望黑色 div 与其父级高度相同，则应删除 100% 高度。如果您的目标是设置黄色 div 的左半部分的样式，那么总是有其他方法可以实现（甚至使用背景图片）。
我希望它占据屏幕上的整个可用空间......但除了我注意到的另一件事之外，为什么它不扩展父 div 以匹配黑色 div 的溢出?我在小提琴上做了这个测试来说明我在说什么：jsfiddle.net/KtUgF/6 如果其他一切都随着数据增长，我会很好！这甚至不再设置为 100%。它只是充满了BR标签
高度是相对于父级的。 "height: 100%" 表示使用与父母相同的高度，而不是填满剩余空间。在你的情况下，你有 100% 的链条一直向上，这意味着它将与窗口的大小相同。在最新的小提琴中，您从黑色 div 中获得了 100% 的折扣，现在它与内容一样大。其他 div 仍然设置为 100% 高度并保持窗口大小。
显然只针对父 div 并忽略实际文档/溢出大小？因为 body/html 正在扩展，因此 100% 也应该与 THAT 相关，对吗？表格是这样工作的，为什么不是 div 的？