Naltroc Naltroc - 2 months ago 6x
CSS Question

Footer tag defies assigned behavior

The basic layout is

<div class="wrapper">

Where the footer should drop below the body and not be affected by the CSS of the body or its children.

I aim for the footer to be at the bottom of the page no matter how much or how little content the body contains. This CSS should do the trick:

body, html {
height: 100vh;
.wrapper {
min-height: 96vh;
position: relative;
footer {
width: 100%;
height: 4vh;
position: relative;
bottom: 0;
font-size: .75em;

On inspection in my browser, the footer is contained within the body tag. This makes no sense. In addition, the footer shows its width to be the same as the viewport but does not reflect that in the demo model. Instead its left border is on the left side of the page and has about 10%
worth of whitepace to the right. Setting
backround-color: yellow
confirms this. And finally, the position fails to go to the bottom unless
pushes it below the screen's view.

What's wrong with this set up?


In HTML5, most everything that is not specifically in a <head> or <body> element, whether you actually declare it so or not, gets assigned to whichever is appropriate. If the necessary element doesn't exist, it's created.

As per the HTML5 spec, <html>, <head>, and <body> are optional. Most browsers work by creating missing elements as necessary. (In my experience, mostly noticed with tables and <thead> and <tbody>.)

Note that the code you see by using the browser's inspector is usually the code that the browser is working with after "fixing" what it got from the server.