Height 0 on Body

Question

I always get height: 0 on the body, Why this happens?

Either I use height, min-height, etc.

Oram

Is there any content? If not, then the html height is 0, and 100% of 0 is still 0. – Arequipa

use height :100% instead of min-height – Elli

if html has not height:100%; set, then it is min-height:100% of null ;) – Fraternity

@JonStirling, Yes, body has height: 100%, as a div-container inside with height: 100% too ... and inside container, I have header and footer, all absolute position – Oram

But do you have any content? As I said, 100% of 0 is still 0. If there's nothing pushing the bottom down, then you will have 0 height. – Arequipa

contents as well inside absolute positioned divs of header and footer @JonStirling – Oram

The please show more of your markup and SASS / CSS. (Not screenshots please.) – Arequipa

Answer 1

Just use:

body{
   height:100vh;
}

This will force the body to 100% viewport height regardless of the page contents.

Pierce

Thanks, didn't know about 'vh', now i will get informed – Oram

This is a terrible advice, you're explicitly setting the body's height to 100vh. Use min-height: 100vh instead. – Alroy

I am sure there is a good reason for what seems to be a convoluted design but +1 for sharing the knowledge. I looked it up: height: 100vh = 100% of the viewport height. height: 100% = 100% of the parent's element height. – Hayse

Answer 2

Height = 0 because the parent of the elements have 0 height, so make sure your parent, which is body here have 100% height or else.

body {
  height: 100%
}

Pinkie

Answer 3

This is caused because of parent height is 0. Follow these styles up!

html{
    height: -webkit-fill-available;
} 

body{
    height: 100%;
}

Gush