html - 如何让文章占满浏览器高度

Question

我想第一个显示在左上角，第二个显示在右上角，第三个显示在左下角，第四个显示在左下角。

目前显示为:Output

但它并没有占据全高。我想将前两篇文章显示为高度的 50%，其余 50% 显示在底部文章中。

body {
  height: 100%;
  padding: 0;
  margin: 0;
}

article:first-child {
  height: 50%;
  width: 50%;
  float: left;
  position: static;
  background-color: red;
}

article:nth-child(2){
  height: 50%;
  width: 50%;
  float: left;
  position: static;
  background-color: yellow;
}

article:nth-child(3){
  height: 50%;
  width: 50%;
  float: left;
  position: static;
  background-color: green;
}

article:nth-child(4){
  height: 50%;
  width: 50%;
  float: left;
  position: static;
  background-color: blue;
}

<article>First</article>
<article>Second</article>
<article>third</article>
<article>fourth</article>

Answer 1

您可以使用Flexbox 和viewport 单位，其中50vw 和50vh 表示 viewport width 和 height 的 50%:

body {
  display: flex; /* displays childen inline by default */
  flex-wrap: wrap; /* enables wrapping */
  width: 100vw; /* added */
  height: 100vh; /* modified */
  padding: 0;
  margin: 0;
}

article:first-child {
  height: 50vh;
  width: 50vw;
  /*float: left;*/
  /*position: static;*/
  background-color: red;
}

article:nth-child(2) {
  height: 50vh;
  width: 50vw;
  /*float: left;*/
  /*position: static;*/
  background-color: yellow;
}

article:nth-child(3) {
  height: 50vh;
  width: 50vw;
  /*float: left;*/
  /*position: static;*/
  background-color: green;
}

article:nth-child(4) {
  height: 50vh;
  width: 50vw;
  /*float: left;*/
  /*position: static;*/
  background-color: blue;
}

<article>First</article>
<article>Second</article>
<article>third</article>
<article>fourth</article>

注意:不需要 float 和默认情况下的 position: static。