100vh似乎没有工作

I am trying to achieve a 100% height & width header image on my website, and I have been researching different ways to do this, and I came across the "100vh" method, however it only displays at 50% the width of my browser and 100% the height.

我试图在我的网站上实现100%的高度和宽度标题图像,我一直在研究不同的方法来实现这一点,我遇到了“100vh”方法,但它只显示我浏览器宽度的50%和100%的高度。

http://gyazo.com/07e4861fa3300c22ce7bafc265b15421

.headercontainer{
	background: #000;
	width: 100vh;
	height: 100vh;
}

<div class="headercontainer">
</div>

I've also tried 200vh and that is too wide.

我也试过200vh,这太宽了。

2 个解决方案

#1

1 vh is one percent of the height.

1 vh是高度的百分之一。

For the width, you want vw:

对于宽度,你想要大众:

width: 100vw;

See Viewport Relative Units in the MDN

请参阅MDN中的视口相对单位

#2

Another way to get a 100% width and height div is to first set body and html to 100% height so

获得100%宽度和高度div的另一种方法是首先将body和html设置为100%高度

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

Then giving the headercontainer class a height and width of 100% should work. One thing to note is that different browsers have padding and margin settings by default so setting those to zero for the body and html is also a good idea.

然后给headercontainer类高度和宽度100%应该工作。需要注意的一点是,默认情况下,不同的浏览器都有填充和边距设置,因此对于正文和html,将这些设置为零也是一个好主意。

Another trick for percentage sizing is adding box-sizing: border-box to a class. That will take into account the padding of an element and include it as the entire width, otherwise if you tell an element to have a 100% width and 10px of padding it will take 100% of the screen width in pixels and then add those extra 10px from either side to width and throw everything off.

百分比大小的另一个技巧是将box-sizing:border-box添加到类中。这将考虑元素的填充并将其包含在整个宽度中,否则如果您告诉元素具有100%宽度和10px填充,则将占用屏幕宽度的100%(以像素为单位)然后添加额外的从任意一侧到另一侧10px并将所有东西都扔掉。

#1