100vh不能全屏显示 [英] 100vh doesn't take whole screen

问题描述

我想创建一个单滚动页面，就像每个部分都离屏幕全高一样.

I want to create a one-scroll-page, like each section is full height from screen.

但是当我使用100vh时，它并不能占据整个屏幕高度，而是更像是95％.

But when I use 100vh, it doesn't take whole screen height, but more like 95%.

这是链接: http://i283951.iris.fhict.nl/stack/例如.

和屏幕: http://postimg.org/image/rc9g3sykh/

PS:第一部分显示100vh很好，下一部分是问题.

PS: first section shows 100vh fine, the next sections are the problem.

推荐答案

在您的CSS中添加以下代码即可解决该问题:

Adding the code below to your CSS should fix it:

html,body{
margin:0;
}

这是由于默认边距为 8px 所致，因此使用CSS重新定义该边距将对其进行纠正.

This is caused by the default margin being 8px so redefining it using CSS will correct it.

已设置边距的插图:

#Orange{
  height:100vh;
  width:100vw;
  background:orange;
}
body{
  margin:0;
  padding:0;
}

<div id="Orange"></div>

未进行 margin:0 调整:

Without the margin:0 adjustment:

#Orange{
  height:100vh;
  width:100vw;
  background:orange;
}
body{
  padding:0;
}

<div id="Orange"></div>

添加此代码应调整容器的边距.

Adding this code should adjust the margins for your container.

.container-fluid{
    margin-top: 0;
    margin-bottom: 0;
}

这篇关于100vh不能全屏显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！