Naltroc Naltroc - 1 year ago 75
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?

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download