如何使儿童 div 具有 100% 的高度和宽度？

Question

如何使儿童 div 具有 100% 的高度和宽度？

<div class="parent">
  <div class="child1">
     Here 100% height and width child 1
  </div>
  <div class="child2">
     Here 100% height and width child 2
  </div>
</div>

谢谢。

Answer 1

如果你想让每个孩子全屏显示，即浏览器视口的 100% 高度和宽度，那么添加100vh; 到您想要影响的 div。 需要注意的是，这仅支持 IE 浏览器返回到 IE 11。

.child1,
.child2 {
    height: 100vh;
}

它们将是 100% 宽度，因为它们是块级元素的div元素。

 .child1, .child2 { height: 100vh; }

 <div class="parent"> <div class="child1"> Here 100% height and width child 1 </div> <div class="child2"> Here 100% height and width child 2 </div> </div>

Answer 2

你可以看看这个网站。

CSS 高度和宽度。

你可以像这样设置你的css文件。

此元素的高度为 200 像素，宽度为 50%

div {
    height: 200px;
    width: 50%;
}

此元素的高度为 100 像素，宽度为 500 像素。

div {
    height: 100px;
    width: 500px;
}