Oliver Scholz Oliver Scholz - 4 months ago 12
HTML Question

How do I put 3 color blocks HTML with CSS

I want my background to be 3 equally high blocks of color (say the German flag).
I created an HTML file with header, main, and footer. And then added the CSS below. But this merely creates 3 small blocks at the top of the page. I tried replacing min-height with height and max-height. No luck. I'm missing something elementary. What?

* {
margin: 0;
padding: 0;
}
body {
height: 100%;
}
header {
background-color: black;
min-height: 33%;
}
main {
background-color: red;
min-height: 33%;
}
footer {
background-color: gold;
min-height: 33%;
}



Answer

Learn flexbox from early on

.main {
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
-webkit-justify-content: center;
 -ms-flex-pack: center;
justify-content: center;
-webkit-align-content: stretch;
-ms-flex-line-pack: stretch;
align-content: stretch;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
width: 100%;
height: 300px;
}

You need a height declaration somewhere though, but other than this, check the pen

http://codepen.io/damianocel/pen/VjxrWN