如何使用CSS将3个色块HTML放入CSS

Question

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 1

The % of height doesn't work since the body doesn't have defined height. HTML doesn't understand - 100% of what?.

You should define the body height in vh ( viewport height units , 1 vh = 1/100 of viewport height):

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

 <header></header> <main></main> <footer></footer> 

Answer 2

CSS has limited support for getting the screen size.

Javascript on the other hand has the ability to do this and it is supported by all browsers as long as js is enabled for them.

<script>
function setBodyHeight(){
  document.body.style.height = window.innerHeight + "px";
}
setBodyHeight();
onresize = setBodyHeight;
</script>

add this to the bottom of the html body and your current css should work as expected.

Answer 3

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