創建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個覆蓋整個頁面的響應框

回答

相關問題