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%;
}
Related
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!
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%.
Can anyone explain to me why my HTML page is not filling the height of the screen? I tried to set the min-height in the css but it's not really affecting anything.
JSFiddle: http://jsfiddle.net/9yFKn/
It's because you're not accounting for the height of the body.
Just add
body{
height: 100%;
}
http://jsfiddle.net/9yFKn/1/
Here is the solution :
html, body { height: 100%; }
but it just a solution you need to understand why is happened , this happened because your element is a block level element which wrap up your whole content width and height width as a 100% but this is not the case with height you need to specify the related to content to give a height in percentages like as above body has given 100%
here is the solution too
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%.