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

我的目标是： These 4 boxes. 我希望这4个框能够保持整个页面的覆盖范围，而不管视口的大小（？）。所以在桌面视图中，它们都是宽矩形，随着变小，它们最终会变成正方形，而在移动视图中它可能是垂直矩形。这只是HTML和CSS可能吗？创建4个覆盖整个页面的响应框

我试过其他的例子，但似乎没有回答我在找什么。我已经尝试使用vw和百分比的方块，但即使我得到的宽度正确的高度将只相对于宽度，而不是整个页面的大小。

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

来源

2017-03-08 J. Taylor

看来我是想，当我试图通过使用浮动过度复杂的事情我。现在，我必须了解更多关于柔性盒的解决方案。谢谢大家发布。他们都为我工作。 –

这里是一个解决方案使用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>

来源

2017-03-08 01:59:49 Brad

我们做的差不多。 Flexbox FTW！ –

地狱是啊，得到它漂浮的人，为什么不使用一张桌子，而你的背在那里过去:) – Brad

基本上，你必须设置每个div的width和height到50%和100%为body和float: left所有div秒。演示：

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

<div class="quarter"></div> 
 
<div class="quarter"></div> 
 
<div class="quarter"></div> 
 
<div class="quarter"></div>

来源

2017-03-08 01:47:34

如果这对您有所帮助，请点击旁边的复选标记将答案标记为已接受。请参阅：[如何接受答案工作？]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work）以获取更多信息 –

在这里你去：

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

<html> 
 

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

 
</html>

来源

2017-03-08 01:48:12 Johannes

ow！在全屏幕下，这些颜色会让我的眼睛变得模糊不清。 +1 –

好吧，没人说*哪个*颜色... – Johannes

最好的问候！

p.s. Flexbox FTW是过去的浮法。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
\t width:90%; 
 
\t max-width: 1200px; 
 
\t margin: 0 auto; 
 
} 
 

 
.boxes { 
 
\t display: flex; 
 
\t flex-wrap: wrap; 
 
\t max-height: 100vh; 
 
} 
 

 
.box { 
 
\t box-sizing: border-box; 
 
\t width: 50%; 
 
\t height: 50vh; 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
} 
 

 
.green { background: green; } 
 
.blue { background: blue; } 
 
.pink {background: pink; } 
 
.yellow { background: yellow; }

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

来源

2017-03-08 01:58:26

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

回答

相关问题