CODEWITHSUNDEEP
htmlcss
fredrivett
fredrivett

Reputation: 6584

How to force the body tag to contain children

https://jsfiddle.net/17nc164k/1/

I've been searching all evening and had no luck finding what I'm after, so I've resorted to asking the community here!

I'm currently developing a Wordpress plugin that adds a fixed newsletter signup bar at the bottom of the page. As this is position:fixed it's taken out of the flow, and as such the issue is that it overlaps the bottom of the page. To fix this I've added this code which creates some space after the body tag:

body:after {
  content:'';
  display:block;
  height:52px;
  width:100%;
}

This works well, but when testing with different themes I noticed for some reason on some of them the <body> tag is collapsed, it has no height whatsoever. As a result the body:after is right at the top and not doing its job adding a space at the bottom. My thoughts are to fix this is to get the <body> tag to expand and contain it's children, that however seems easier said than done.

Nearly all the suggestions I've seen say this:

html { height:100%; }
body { height:100%; min-height:100%; }

Currently on this theme the <html> element is fine, and contains the whole page (838px height) but if I add html { height:100%; } it goes to the height of the viewport. But without adding that the body { height:100%; } code does nothing.

There are a tonne of questions out there about expanding the <body> to fit the viewport, but I've not found anything that solves this yet. Totally happy to be proven wrong as I'm sure it's addressed somewhere but after a couple of hours of head banging and no light at the end of the tunnel I've resorted to asking here.

Upvotes: 0

Views: 166

Answers (3)

firefoxuser_1
firefoxuser_1

Reputation: 1839

The min-height should apply to both the body and the html:

body, html { min-height: 100% }

This way, both will take up at least the viewport height, but will expand more if the content is more than the viewport height.

Update: if the body has no height because it's contents are floated, you can set clear: both on your :after element.

Upvotes: 1

Leo Farmer
Leo Farmer

Reputation: 7910

If the html element has the correct height, you could set the body element to:

 body{
    height:inherit;
 }

This should set it to have the same height as the html.

Upvotes: 0

Alex W
Alex W

Reputation: 38243

Don't use the :after pseudo element. Just give the <body> tag some padding at the bottom. It will be much more cooperative and also has better browser support.

body { 
    padding-bottom: 52px
}

Upvotes: 0

Related Questions