Let's say you wanted your content to take up 100% of the height of the viewport. You used to have to set the height of the html and body elements to 100%. This way, you could give direct descendants of the body element percentage heights as well, like so:
<head>
<style>
html, body { height: 100% }
body { margin: 0; }
header, footer { height: 10% }
main { height: 80% }
<style>
</head>
<body>
<header>Intro</header>
<main>The Main Stuff</main>
<footer>Additional Details</footer>
</body>
The html, body { height: 100% } declaration is no longer required to set a percentage height on direct descendants in Chrome. However, it's still required in Firefox.
Is this a bug in the latest update to Chrome, which came early February? Or is the height now set to 100% by default?
Just to clarify, I'm not asking about how to implement a percentage-based layout. I'm more asking about Chrome's implementation of the body and html elements' default heights. This could be very confusing for novice developers who might come to think that the html and body don't need a height explicitly defined if they want direct descendants of the body to have percentage-based heights.
In the code you provided, the html and body take up 100% of the page height because there's no doctype declaration. Most browsers will revert to 'quirks' mode if no doctype is provided.
If you add the HTML5 doctype (<!DOCTYPE html>), you should find that the body and html elements no longer take up the whole viewport without an explicit height.
I can't say whether there is a bug or not, but in order to ensure that your elements take up 100% of the viewport height, you should really use 100vh:
html, body {
height: 100vh;
}
Percentage-based heights are always relative to the direct parent. As there's no parent of <html>, you would expect it to default to a height of 0px. Some browsers may interpret how to handle the parent of <body> differently, so it's safest to just use vh measurements for the <body> tag.
Note that you can use vh units on any element -- not just <html> and <body>!
Hope this helps!
Related
I'm attempting to expand my body tag to full browser height to fully display background color. I understand there are some solutions that suggest using html tag height of 100% and body tag with height of 100% or min-height of 100%.
I have found a solution (below) that has achieved the same result by specifying a min-height of the full view port and this works on different browsers. Could I use this as an alternative solution? If any, what are the disadvantages of this solution? Please provide some supporting evidence.
body {
background-color:#ea7400;
height: 100%;
min-height: 100vh;
}
#Josethehose provided a comment directing me to useful information on my question. See min-height in vh vs % for body?
While my solution did work, I don't believe it is the optimal solution because it uses unnecessary code.
Explanation:
The html, and body tags don't have default heights and can be sized relative to their parent elements. The hierarchy is Viewport > HTML > Body. The actual size of the browser screen is Viewport, so specifying the height: 100% for the html tag will ensure it is the full height of its parent element or the Viewport. The height: 100% can be coupled with the body tag to achieve full height of the parent element or the html tag which is inherited from the Viewport.
The optimal solution would be:
html,
body {
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?
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.
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.
Make sure your HTML and Body are 100%;
body, html {
height: 100%
}
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
While designing layouts I set the html, body elements' height to 100% but in some cases, this fails, so what should be used?
html, body {
height: 100%;
}
or
html, body {
min-height: 100%;
}
Well, this is not opinion based as each method has its own flaws, so what's the recommended way to go for and why?
If you're trying to apply background images to html and body that fill up the entire browser window, neither. Use this instead:
html {
height: 100%;
}
body {
min-height: 100%;
}
My reasoning is given here (where I explain holistically how to apply backgrounds in this manner):
Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.
The first way, using height: 100% on both, prevents body from expanding with its contents once they start to grow beyond the viewport height. Technically this doesn't prevent the content from scrolling, but it does cause body to leave a gap beneath the fold, which is usually undesirable.
The second way, using min-height: 100% on both, doesn't cause body to expand to the full height of html because min-height with a percentage doesn't work on body unless html has an explicit height.
For the sake of completeness, section 10 of CSS2.1 contains all the details, but it's an extremely convoluted read so you can skip it if you're not interested in anything beyond what I've explained here.
You can use viewport height (vh) unit:
body {
min-height: 100vh;
}
It is relative to screen, not to parent height, so you don't need html height: 100%.
I noticed that setting the html and body height to 100%, the body's width seems to be set automatically to 100% (even if it does not appear among the css rules), why?
<html>
<head
<title>full screen</title>
<style>
html, body{
margin: 0;
height: 100%;
background-color: rgb(200,50,50);
}
</style>
</head>
<body>
</body>
</html>
http://jsbin.com/wocini/1/edit?html,css,output
Setting these elements' heights to any value (or even not setting it at all) doesn't change their width, which is 100% by default due to them being block elements.
You can verify this by inspecting any HTML page in your browser and looking for the property display: block;, defined by user agent stylesheet (your browser), in these elements.
While designing layouts I set the html, body elements' height to 100% but in some cases, this fails, so what should be used?
html, body {
height: 100%;
}
or
html, body {
min-height: 100%;
}
Well, this is not opinion based as each method has its own flaws, so what's the recommended way to go for and why?
If you're trying to apply background images to html and body that fill up the entire browser window, neither. Use this instead:
html {
height: 100%;
}
body {
min-height: 100%;
}
My reasoning is given here (where I explain holistically how to apply backgrounds in this manner):
Incidentally, the reason why you have to specify height and min-height to html and body respectively is because neither element has any intrinsic height. Both are height: auto by default. It is the viewport that has 100% height, so height: 100% is taken from the viewport, then applied to body as a minimum to allow for scrolling of content.
The first way, using height: 100% on both, prevents body from expanding with its contents once they start to grow beyond the viewport height. Technically this doesn't prevent the content from scrolling, but it does cause body to leave a gap beneath the fold, which is usually undesirable.
The second way, using min-height: 100% on both, doesn't cause body to expand to the full height of html because min-height with a percentage doesn't work on body unless html has an explicit height.
For the sake of completeness, section 10 of CSS2.1 contains all the details, but it's an extremely convoluted read so you can skip it if you're not interested in anything beyond what I've explained here.
You can use viewport height (vh) unit:
body {
min-height: 100vh;
}
It is relative to screen, not to parent height, so you don't need html height: 100%.