跨浏览器的神秘身高问题答案

【问题标题】：Mysterious height issue cross browser跨浏览器的神秘身高问题
【发布时间】：2015-02-04 02:16:04
【问题描述】：

我有两个 body 元素的子元素。 HTML 和 BODY 元素的样式都设置为 height:100%。至于孩子，第一个固定高度为 100px，另一个设置为 height:100%。

但是，这样做会在视觉上取代第二个子元素，将其向下推到页面并创建一个侧滚动条。实际上，这个子元素的高度是 body 和 html 标签的 100%，但是因为它位于 100px 的第一个子元素之后，所以整个部分会向下移动 100px 页面并创建一个侧滚动条。

我可以在其中一个父元素上使用 overflow: hidden 来剪掉多余的部分，或者在第二个子元素上使用负边距来将其拉回来，但我不希望这样做。

理想情况下，第二个元素将直接出现在第一个子元素之后，并延伸到窗口底部，仅此而已。我希望 section#content 响应视口，所以我也不想为它设置明确的高度。

我在父母和孩子身上尝试了各种定位技术，但仍然不是我想要的。

例如，将父元素设置为绝对定位并固定到屏幕的所有四个角对子元素的高度没有影响。它仍然保持适当的高度，但仍然受到 100px 偏移的影响。

这是一些简单的 HTML：

<body>
   <section id="header"></section>
   <section id="content"></section>
</body>

我已将 html 和正文高度设置为 100%，并为 #header 指定了 100px 的高度。

#content 部分我给出了 100% 的高度，但问题是这部分扩展了窗口高度。

这是我的简单 CSS：

html, body{
    height:100%;
    margin:0; padding:0;
}
section{
    margin:0; padding:0;
}
#header{
    height:100px;
}
#content{
    background:white;
    height:100%;
}

知道这里发生了什么吗？更重要的是，如何解决它？？

干杯

【问题讨论】：

标签： html css

【解决方案1】：

我已将-100px 的负数margin-top 添加到#content（标题高度）+ 将position: relative; 添加到#header。这就是你要找的吗？

这是一个 jsFiddle：http://jsfiddle.net/breadadams/1zptzjwr/

【讨论】：

【解决方案2】：

好吧，您自己说发生了什么...您在100px 高度元素之后放置了一个完整高度元素。因此，您的文档的高度为100% + 100px。到目前为止没有什么神秘的。

有很多方法可以创建这种布局。我最喜欢使用 display: table 布局，它会自动调整大小。

但一个简单的解决方法是在第二个高度上使用calc()（如果您不关心旧的 IE 版本...）

#content{
    background:white;
    height: calc((100%) - 100px);
}

【讨论】：

【解决方案3】：

视口百分比（或视口相对）长度：这些单位是 vh（视口高度）、vw（视口宽度）、vmin（视口最小长度）和 vmax（视口最大长度）。

试试这个。Link

HTML：

<body>
    <div class="wrapper">
        <section id="header"></section>
        <section id="content"></section>
    </div>
</body>

CSS：

      body{
    height:100vh;
    margin:0; padding:0;
}
.wrapper {
    height: 100%;
}
section{
    margin:0; padding:0;
}
#header{
    height:100px;
    background:blue;
}
#content{
    background:red;
    height: calc((100%) - 100px);
}

【讨论】：

请添加负面评论。