Question

我有两个身体元素的孩子。 HTML和BODY元素的样式都设置为高度：100％。对于孩子，第一个具有100px的固定高度，另一个设置为高度：100％。

但是，这样做会直观地替换第二个子元素，将其向下推到页面并创建一个侧滚动条。实际上，这个孩子是身体和html标签的高度的100％，但因为它出现在100px的第一个孩子之后，整个部分在页面100px下移位并创建一个侧滚动条。

我可以使用overflow：隐藏在其中一个父元素上来剪掉这个多余的元素，或者在第二个孩子上使用负边距来画回来，但我不想这样做。

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

我在父母和孩子身上尝试了各种定位技巧，但仍然不是我追求的目标。

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

以下是一些简单的HTML：

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

我已将html和body高度设置为100％，并且#header的高度为100px。

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

这是我简单的CSS：

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

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

干杯

Answer 1

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

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

Answer 2

嗯，你自己说了发生了什么...你在100px身高后放置一个全高度元素。因此，您的文档的高度为100% + 100px。到目前为止没什么神秘的。

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

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

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

Answer 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);
}

神秘高度问题跨浏览器

3 个答案: