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

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/