Question

我正在使用wordpress中的一个页面显示8个带有一些内容的div。我希望在所有设备中将所有div显示为窗口高度的100％，然后当用户点击链接时，它会显示另一个div接下来点击下一个，但不知怎的，我的div不会达到100％的高度。

这是css：

<style>
html {
    height: 100%;
}
body {
        line-height:25px;
    margin: 0;
    padding: 0;
    height: 100%;
}
.content {
    margin: auto;   
    min-height: 100%;
}

</style>

这是html：

<div class="container">

<div class="content" >
<----content goes here------>
<a href="#Initial" rel="m_PageScroll2id" >NEXT</a>
</div>

<div class="content" id="Initial" >
<----content goes here------>
<a href="#Initial" rel="m_PageScroll2id" >NEXT</a>
</div>

</div>

以下是我的虚拟页面的链接：

http://enablersinvestment.com/backend/how-it-works-scroll/

Answer 1

您只需将.content min-height设置为100vh，如下所示：

.content {
    margin: auto;   
    min-height: 100vh;
}

结帐此演示：http://jsbin.com/xayaku/1/

Answer 2

如果我正确则孩子将百分比高度调整到父母的身高。

在你的情况下，孩子的内容是父母是容器。你应该给容器高度100％。

.container {
    min-height: 100%;
}

如果我错了，请纠正我

Answer 3

您还需要将.container的高度设置为100％：

html {
    height: 100%;
}
body {
        line-height:25px;
    margin: 0;
    padding: 0;
    height: 100%;
}

.container {
  height: 100%;
}

.content {
    margin: auto;   
    min-height: 100%;
}

Answer 4

你的问题是你的内容在容器内，而容器没有高度：100％。

将以下规则添加到您的CSS中，您应该没问题。

.container {
    min-height: 100%;
}

Answer 5

要让div填充整个网页，您必须添加以下行：

位置：绝对;

例如：

div.content {
    position: absolute;
    height: 100%;
}

没有那条线，＆＃39; 100％＆＃39;将被视为里面 div的大小。

如何设置div高度100％以匹配所有设备的文档/窗口高度

5 个答案: