die höhe des farbigen abschnittes soll der browserhöhe entsprechen

/* für footer an bottom kleben */
* { box-sizing: border-box; } *:before, *:after { 
box-sizing: border-box;} 
 
html, body { 
height: 100vh; /* 100% */
height: -webkit-calc(100% - 0px); /* wegen safari-ios ... */
position: relative; } 
 
/* Footer definitionen */
footer#colophon { 
max-width: 100%; 
background-color: white; 
margin: auto 0; 
border-top: none; /* für footer bottom problem */
position: absolute; 
bottom: 0; 
width: 100%; }