CODEWITHSUNDEEP
htmlcss
desmanda
desmanda

Reputation: 23

html element is not taking the height of the browser even with height 100%

when I inspect my html element I find out that it is not taking 100 % of the browser view even if I am setting height to 100% in my css sheet.I test it with chrome and firefox and it is the same.The browser adds display:block to my html element could it be the reason?

Upvotes: 0

Views: 139

Answers (4)

Praveen Puglia
Praveen Puglia

Reputation: 5631

The most common reason I have found this happens is because you forgot to set height: 100% for both html and body elements.

Remember percentage is a relative unit and it can't work until it finds a parent that has declared absolute height/width. Also, if the parent has height/width set in percentage, that calculated value will be used as the basis for computing the percentage for children.

Also, while doing this, you might want to consider thinking about the box-sizing because if you set height as 100% and then apply margins and paddings to that element, it's gonna occupy more than 100% of it's parent's height.

Assuming your markup is like...

<html>
    <body>
        <div class="my-element"></div>
    </body>
</html>

If you still wanna use percentage as length value, do.

html,
body, 
.my-element {
    height: 100%;
}

Or use the better length unit vh;

.my-element {
    height: 100vh;
}

Read up more about vh here - https://developer.mozilla.org/en/docs/Web/CSS/length

Check browser compatibility here. - http://caniuse.com/#feat=viewport-units

Upvotes: 0

Nieck
Nieck

Reputation: 1646

Make sure your HTML and Body are 100%;

body, html {
    height: 100%
  }

Upvotes: 0

Chris
Chris

Reputation: 59511

it is not taking 100 % of the browser view

If you strictly want the element to take the height of the 'browser view', or viewport as it's called, simply do:

#element {
  height: 100vh;
}

That sets the element to 100% the height of the viewport. Check this page for browser support info.

Upvotes: 3

Itay Gal
Itay Gal

Reputation: 10834

You didn't provide a code/example but my guess is that your html and body don't have the height: 100% as well. Try to add them to your css

html, body{
    height: 100%;
}

Note that the height percentage refers to the element's parent, so if the element's parent is only 30% of the page for example, your element will be 30% too.

Upvotes: 0

Related Questions