I want to make <body> with 100% of the page height.
When I use 100% or 100vh on both <html> and <body>, they don't extend when the page content overflows the viewport.
html {
height: 100%;
}
body {
height: 100%;
}
When I use min-height: 100%; for <body> instead of height: 100%;, it does extend, but then I cannot use percentage height for divs inside the body, since the body does not have the height set.
How to make the body "infinite" and still be able to use divs with percentage inside it?
What you want isn't possible and more precisely not logical. let's ask a trivial question:
What will define the height of the body?
1) you want your body to be height:100% of the screen: You can either use a cascading height:100% or height:100vh and your body will have an explicit specified height thus you can use percentage height inside it but the body won't grow more than 100%.
2) you want your body to be min-height:100% of the screen: You can use either min-height:100vh or min-height:100% while having height:100% set to html. In this case, the content of the body will define the real height as you simply added a min-height constraint. If you have a lot of content, the body will grow beyond the 100% limit, if not you will have it at 100%. In this situation, it's clear that the content cannot use percentage value within height since the content is defining the body height.
You can have either (1) or (2) but you cannot have both since there is no logical way to define a min-height to the body, allow it to grow (depending on its content) and allow its content to use percentage values within height.
Related
I'm confused as to what making a html element "height: 100%;" does exactly.
I've made both html and body 100% height
I've added a few 100% height sections inside
The content displays correctly.
But then I looked at the page with Inspect Elements and I noticed that even though the contents displayed are above 100vh, the html, the body and the wrapper are all exactly 100vh.
Is this normal behaviour? Should I refrain from changing the height of the html and body element unless I want a site that's strictly 100vh?
height is always relative to its parent.
If you have html's height as 100vh, and then body as height: 100%, then body will also be 100vh, because body's parent is html, and the height is always relative to its parent.
The 100% is covering 100% of the parent. What the % corresponds to is determined by what modifier it is included with. If a height is set to 100% it will scale linearly with vh. If a width is set to 100% it will scale with vw. So yes, it is normal to see 100% height correspond to 100vh;
The vh unit means "Viewport Height". Setting the html or body height to 100vh is essentially redundant since a page will always want to fit within the height of the viewport in the first place.
Should I refrain from changing the height of the html and body element
unless I want a site that's strictly 100vh?
I can't think of any scenario where you'd want to set the html or body height at all. It is much more common to set the height of elements "within" the body, not the body itself.
On my page, I want to make the body be at least 100% of the viewport (i.e. when the content is very less) but take on the height of the content as content increases.
Right now I have done
html{height:100%;}
body{height:100%;}
But with this, if the content increases, then body remains 100% of viewport height only and does not take the height of the content.
How to solve for this?
body { min-height: 100vh; } is all you'll need.
html {
height:100%;
}
body {
min-height:100%;
overflow-y:auto;
}
This should be work.
What you can do with css is to use “vw” unit. Just set body’s , width, height, min-width and min-height to 100vw/vh correspondingly; also you can give “box-sizing” : “border-box” which should include margin and paddings in the width and height
2.If you are not happy with the css results, you can always use javascript. You must write a function which will give viewport width and viewport height to body’s with and height,
With jquery you can do it like
$( window ).width();//documents width
$( document).width();//documents width
Same should work with height, call this function when document is ready
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%.
There is an inline-block element with 100% height and width :
<div style="width: 100%; height: 100%; background: red; display: inline-block">Y</div>
Why doesn't this div take up whole height, but takes up full width?
An auto width on a block box causes it to be as wide as its containing block allows. An auto height, on the other hand, causes it to only be as tall as its contents.
The block box in question is body, and by extension, html. Neither element has an intrinsic height (even though the initial containing block does), so the height of both elements defaults to auto.
The 100% width and height of the inline-block respect the used width and height of its containing block, which in this case is body. If you specify any arbitrary height on body, or height: 100% on both html, body, then the inline-block will be adjusted accordingly.
Note that because an inline-block is essentially the same as a block box except laid inline, percentage width and height are calculated the same way as if the element were block-level.
It takes height of its parent
try:
html,body {
height: 100%;
}
That's because a div by default takes full width, unless specified otherwise.
Making it inline-block, just allows it to be inline, but preserving its block nature such as setting width and height, top and bottom margins and paddings.
And the height of every element(not-null) in html markup is same as height of a line.. which can be changed by line-height property.
And if you wish it to take all-height, follow the above answers.
Because your html and body tags don't take full height.
Unless specified otherwise, block elements take full width, but only as much height as needed - it is only natural, since HTML was originally meant as a way to format text documents. You wouldn't want, say, a paragraph to take the full window height.
You must set their height to 100% to get it work - stretch them to the window height:
html, body {
margin: 0;
padding:0;
height:100%;
}
http://jsfiddle.net/gdyLs/1/
You need to specify height to html and body then only that div will take 100% height
html, body{
height: 100%;
}
If I have the following markup
<html>
<body>
<div id="wrapper">
<div id="container">
<p>Lots of pragraphs here</p>
</div>
</div>
</body>
</html>
with the following styles
html, body, #wrapper
{
width: 100%;
height: 100%;
}
#container
{
width: 960px;
margin: 0 auto;
}
why does not my html, body and wrapper elements extend to 100% height of the browser/view port in FF13. The html, body and wrapper stop vertically about some distance from the bottom when looking in Firebug. The container div extends to the full height as it's height is determined by the content.
(1263px X 558px for html, body, wrapper) and (960px X 880px for container)
Looking at default 100% the above happens as the first image below shows. But when I zoom to the last poosible zoom in, the above does not happen as the second image below shows and the html, body, wrapper extends to the full height.
(4267px X 1860px for html, body, wrapper) - (960px X 1000px for container)
Your html actually exactly extends to 100% height of your viewport cause viewport here is the browser window, not the inner content.
Consider this (jsfiddle):
<div id="div1">
<div id="div2">
<div id="div3">
very much content
</div>
</div>
</div>
#div1 {
height:300px;
overflow-y:scroll;
border: 1px solid black;
}
#div2 {
height:100%;
}
#div3 {
height:600px;
}
div1 here has the height of 300px and is scrolled. When you scroll content you simply move inner div but height remains untouched that is 300px. Exactly the same happens when you set height:100% to html. Your browser's height remains the same.
When you zoomed out your viewport then you have not scroll, so inner content's height is less than the height of viewport.
Shortly, html {height:100%} relates to parent's height not to the height of the inner content
UPDATE:
you can specify 3 types of values to the block-element's height:
length - set fixed height (i.g. '200px', '50em'). That's all, I can say nothing more about that.
percentage - from W3C spec:
The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'. A percentage height on the root element is relative to the initial containing block.
auto - The height depends on the values of other properties. (Generally on the height of inner content: text, other inline elements, block elements etc.)
What is happening when browser shows your page:
it gets height: 100% for <html>. That means that the resulting height is calculated with respect to the height of the generated box's (html-element in that case) containing block (initial containing block, i.e. browser window in that case). Let's say 1024px.
then it takes height: 100% for <body>. It will set body's height to the already calculated height of the html, that is 1024px.
then browser applies height:auto to the #wrapper and then the #container and the <p>. I don't know how it does that exactly but can suppose that it postpones the height setting (and respectively all other styles which depend on that i.e. backgrounds, borders etc.) and proceeds to the inner content.
next point is text content. Browser takes related properties specified or it's own, that is default styles, like font-family, font-size and the height of the text.
after that it will set height to the <p>-element so the <p> will stretch down to contain all content (the text in that case). The same then happens to the #container and the #wrapper.
If it happens that the height of the #wrapper is greater than the body's one (1024 px as it were agreed) than the overflow should be applied to the body. That is visible which is the default. Then overflow: visible is applied to the html. Then browser shows scroll for the entire window. Honestly, I don't know whether this is specified by the W3C spec, but can suppose it is.
So when you scroll the window your html and body are moved as are all the other elements. This is the same behavior as is with any other elements (like in jsfiddle I posted above):
Note that the background is set on the body element, but it extends to the entire canvas i.e. far beyond of the body element itself. This is towards your concern of the possible necessity of setting bg-property on the body. This is 100% compliant with the W3C spec which states (cutted):
For documents whose root element is an ... "html" element that has computed values of 'transparent' for 'background-color' and 'none' for 'background-image', user agents must instead use the computed value of the background properties from that element's first ... "body" element child when painting backgrounds for the canvas, and must not paint a background for that child element. Such backgrounds must also be anchored at the same point as they would be if they were painted only for the root element.
When you zoom out your page then browser recalculates all dimensions. Let's say, with each Ctrl + - click page shrinks, for example, for 20 %. Then all your text is reduced, cause its height depends on the font-size, which is affected by the Ctrl + - click, correspondingly <p>, #container and #wrapper all are reduced cause their height depends on text's height. But body and html both have height which depends on the window's height which is not affected by the Ctrl + - click. That is why you finally get this:
There is no difference here between width and height behavior in that case. You don't see the same issue with horizontal dimension simply because you've set width: 960px; for the #container which turned out to be less than your browser window's width, so no overflowing occurs. If the width of the #container were exceeding body's width you would see this:
This all is a normal and expected behavior and there is nothing to solve here.
Because you can never set the height to 100% if the element is relative to the browser window. The reason for this is that because of scrolling, your browser window could potentially be infinitely big. You will have to set a fixed height, or you will just have to set the height to expand to whatever is inside of it.
However width: 100%; is perfectly valid.
You will also need to use valid html tags. what I would do is, instead of using <wrapper> and <container>, I would make a class in your css. Class names are declared by starting them with a period.
.container{
width: 100%;
}
<div class="container"></div>
Good Luck,
-Brian