jquery - 100vh div 的内容显示在下一个 div

Question

我已经成功地让一些div的高度达到height:100vh;

但是当我在小型显示器上尝试时，似乎 div 的内容被合并了 包含下一个 div 的内容 .. 示例:

http://www.shy22.com/upfilpng/pvt29848.png

您可以尝试将白色 div 的高度更改为 100vh : http://attafothman.olympe.in/

(抱歉我的英语不好)

Answer 1

如果您想要一个元素使其与您的屏幕大小相同，您必须将 html 和 body 元素的高度和宽度设置为 100%，并对所有边距和填充进行小的 css 重置，如下所示:

* {
   margin: 0;
   padding: 0;
}

html, body {
   height: 100%;
   width: 100%;
}

你想要填充屏幕宽度的元素你可以简单地给出 100% 的高度。

像这样:

.fitScreen {
   position: relative;
   height: 100vh;
   background-color: yellow;
}

在此之下，您可以设置任何您想要的元素，具有您想要的任何高度，如下所示:

.content {
    position: relative;
    height: 1500px;
    background-color: green;
}

Heres a jsFiddle to show you what im doing