如何让文章占据完整的浏览器高度

Question

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

目前显示为：Output

但它没有达到全高。我希望将前两篇文章显示为高度的50％，其余50％显示为底部文章。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用 Flexbox 和视口单元进行操作，其中50vw＆amp; 50vh表示视口 width和height的 50％：

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 2

您是否尝试min-height: 50%;或更好height: 50vh;