Why is it the Footer overlapping the Article (w/ Section tags) even though it should not be. This happens when I set the Html, Body, and Article(and Section) height to 100%.
Thanks for answering the question! :)
Here's the code:
Thanks for answering the question! :)
Here's the code:
Code:
<!DOCTYPE html> <html> <head> <title></title> <style>
*{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
html, body{
margin: 0;
padding: 0;
height: 100%;
color: white;
font-family: sans-serif;
text-align: center;
position: relative;
}
.wrapper, header, article, section, footer{
margin: 0 auto;
width: 100%;
position: relative;
}
header, section, footer{ padding: 25px 0; }
.wrapper, article, section{ height: 100%; }
section{ border-bottom: 10px solid red; }
header, footer{ background-color: rgba(27,27,27,1); }
</style> </head> <body> <div class="wrapper"> <header> <h1>HEADER</h1> </header> <article> <section></section> <section></section> </article> <footer> <h1>FOOTER</h1> </footer> </div> </body> </html>
Comment