Question

我的目标是： These 4 boxes. 我想让这4个盒子保持整个页面的覆盖范围，而不管视口的大小（？）。所以在桌面视图中它们都是宽矩形，当你变小时它们最终会变成正方形，而在移动视图中它可能是垂直矩形。这只能用HTML和CSS吗？

我尝试了其他例子但似乎没有回答我正在寻找的东西。我已经尝试过使用vw和百分比来表示框，但即使我得到的宽度正确，高度也只相对于宽度而不是整页的大小。

任务似乎相对简单，但我无法在任何地方为我的生活找到答案。请帮忙！感谢。

Answer 1

你走了：

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}
div {
  float: left;
  width: 50%;
  height: 50%;
}
div:nth-of-type(1) {
  background-color: red;
}
div:nth-of-type(2) {
  background-color: green;
}
div:nth-of-type(3) {
  background-color: orange;
}
div:nth-of-type(4) {
  background-color: blue;
}

＆＃13;

<html>

<body>
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</body>

</html>

＆＃13;

Answer 2

基本上，您必须将每个width的{{1}}和height设置为div，并50%设置100%和body {1}}所有float: left个。演示：

＆＃13;

div

＆＃13;

.quarter:first-child {
  background: red;
}
.quarter:nth-child(2) {
  background: blue;
}
.quarter:nth-child(3) {
  background: green;
}
.quarter:nth-child(4) {
  background: purple;
}

.quarter {
  height: 50%;
  width: 50%;
  float: left;
 } 
 
 html, body {
   height: 100%;
   width: 100%;
  }
 }

＆＃13;

Answer 3

祝你好运！

P.S。浮动来自过去，Flexbox FTW。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
	width:90%;
	max-width: 1200px;
	margin: 0 auto;
}

.boxes {
	display: flex;
	flex-wrap: wrap;
	max-height: 100vh;
}

.box {
	box-sizing: border-box;
	width: 50%;
	height: 50vh;
	display: flex;
	justify-content: center;
	align-items: center;
}

.green { background: green; }
.blue { background: blue; }
.pink {background: pink; }
.yellow { background: yellow; }

<div class="container boxes">
	<div class="box green">1</div>
	<div class="box blue">2</div>
	<div class="box pink">3</div>
	<div class="box yellow">4</div>
</div>

Answer 4

以下是使用flexbox的解决方案：https://jsfiddle.net/wosmqs2v/

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  height: 50vh;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 50%;
  min-width: 300px;
}

.box1 {  background: red;}
.box2 {  background: blue;}
.box3 {  background: green;}
.box4 {  background: orange;}

<div class="container">
  <div class="box box1">1</div>
  <div class="box box2">2</div>
  <div class="box box3">3</div>
  <div class="box box4">4</div>
</div>

创建覆盖整个页面的4个响应式框

4 个答案: