Question

我正努力达到100％的高度和我网站上的宽度标题图片，我一直在研究不同的方法，我遇到了＃34; 100vh＆＃34;方法，但它只显示我浏览器宽度的50％和高度的100％。

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

1 vh是身高的百分之一。

对于宽度，您需要vw：

width: 100vw;

Answer 2

获得100％宽度和高度div的另一种方法是先将body和html设置为100％高度，这样

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

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

百分比调整的另一个技巧是将box-sizing: border-box添加到类中。这将考虑元素的填充并将其包含在整个宽度中，否则如果您告诉元素具有100％宽度和10px填充，则将占用屏幕宽度的100％（以像素为单位）然后添加额外的从任意一侧到另一侧宽度为10px，并将所有物品全部关闭。