There's lots of questions on SO related to this, but the ones I scanned are all for detailed specific situations. What I want to know is, at a conceptual level, what does it mean to say:
<div style='height:100%'>
How high is 100%? 100% of what?
[EDIT]
Followup question: If 100% represents the height of the parent, but the parent is <body> and has no height other than the height of the div, then what does it mean? It seems recursively defined.
100% of the parent container's height.
See here: http://jsfiddle.net/6VRn6/
If you want to use this method to make the div 100% of the page's height, you have to specify the height as 100% of the body and html as well.
body, html {
height: 100%;
}
When you don't specify a html or body height, their heights are the sum of the heights of the elements in it.
Updated demo showing this. We have a 200px div with 2px borders totaling 204px and then a 40px status div. The body height should be 244px. Now, if you add the CSS above to the page, the height will be the height of the bottom right quadrant of the jsfiddle. Try adding it and running the code again. Then resize the result pane and run it again to see the height change accordingly.
100% of the offsetParent. In most cases, that's the document. It can also be an element with position other than static, or a component of a table.
The height:100% means :
Make that div big as the parent!
It just means 100% of the div or class or tag it is enclosed within. Try having an idea somewhat this:
{--parent loop
{
..height 100% of above loop
..
}
}
Related
This might be a silly question. However, I couldn't find the exact reason for this question. Whenever I set 100% to width and height of a div it doesn't take this behaviour but when I set the width and height of the Html and body elements to 100% then the div with 100% size works perfectly. What is the reason behind it? Thanks in advance :)
Just ask yourself: 100% of what? The answer is: 100% of the parent element, which in many situations is the body, whose parent again is the HTML tag.
If I have a div with height:100% & width:100%, it's background color will be up to the browser's height and width primarily. But if the content inside that div grows dynamically, then, the div will not expand according to the content, text will be overlapped and flows over that div.
On the other hand, if I set min-height and min-width to 100%, then if the content length is smaller than browser's window, background-color will not stretched to browser's height and width.
html, body{
height: 100%;
margin: 0;
padding: 0;
}
#container{
height: 100%;
width: 100%;
background-color: red;
}
How to make such div which background-color will cover up browser's window size primarily but if the content grows dynamically, it will be able to expand with content at the same time.
Regards.
I still don't know what you are actually trying to achieve. Going by your fiddle sample, it would have been much easier to just use a solid border around the inner diver to get a red surrounding (instead of another div with background color and padding). But if you just don't want that the text oveflows the div, you have to allow the div to resize:
http://jsfiddle.net/JQ7fr/1/
Update
I think see your problem now. What you are trying to do is not possible the way you are trying to do it. You are falling for a fundamental misconception of the CSS Box Model. The min-height of a box always refers to the height of its parent. If the height of the parent is not set, the height is auto by default, which means the height is calculated by the browser to be as big as necessary for the content of the box to fit. It is also calculated that way if you set a min-height!
Assume you give body a height of 100%, the body is as high as your browser window. If give your outer div a min-height of 100%, it will also be as high as your browser window, but since you set no height (setting min-height does NOT affect the height property!), the height of this box is auto. So in fact, the real height (CSS standard calls this the "tentative height") is only as big as the content of your outer div (not necessarily 100%), yet since min-height says it must be 100% it will render with a height of 100%, regardless what its real height is. If you now set min-height of your inner div to 100%, those 100% mean "100% of the height of my parent box height" and the parent box height is auto, it is NOT 100%! That's why the inner div does not fill the whole screen then.
Of course you can give your outer div a height of 100%, in that case setting the min-height of your inner div to 100% will make it fill the whole screen, but now the outer div is really just 100% in height, it will not expand beyond 100% (it has a FIXED HEIGHT), not even if the inner div is bigger than that, that's why red color will not expand beyond the screen height, even if the yellow color goes beyond the screen height.
Either your outer div has a fixed height, in which case the height will be fixed (that's the whole point of a fixed height, isn't it?) or it has a flexible height, but if it has a flexible height, it will never be "higher" than required for its content (the inner div) and thus using 100% at the inner div, whether you set min-height or height doesn't matter, always refers to 100% of the outer div height and that one will be as big as required for the inner div. I hope you were able to understand what I'm saying here.
You can surely get outer div to behave the way you want (always fill at least 100% of the screen, but expand beyond that if the content requires it) by just setting it's min-height to 100%, since here min-height will refer to the body height and your body has a fixed height, but the inner div will never behave that way. Well, it can behave that way, if your outer div has a fixed width, but then the outer div will not expand, not even if the inner div would require it, instead the inner div will overflow beyond the bounds of the outer one.
I'm pretty sure it is no problem to some create a web page that will look exactly the way you want it to look, but the problem is, we (or I) don't know what it is supposed to look. I doubt you want an ugly yellow page with a red and blue border around it, do you? Yet so far this is the only page we have seen from you. I don't know what kind of color effect you are trying to achieve, whether you are using images (or if you should be using images) or how the page will really look like in the end.
I can't understand your question very clearly, I think you should set a correct overflow property to your div,
try giving it overflow: auto; or any other suitable one
The CSS Overflow Property
I have overflow-x:hidden placed on the body tag of my page so that any content extending beyond the window will not be visible. No scroll bars show up, however, I can still scroll to the left / right to see the content (kinda defeats the purpose of overflow-x).
-ms-overflow-x: doesn't fix the problem either.
There is a wrapper 900px;
Inside the wrapper, there is a div inside:
width:100%;
padding-right:300px;
position:absolute;
left:200px;
I would like the inner div to hang over the right side of the window without causing it to scroll (and leaving a 200px space the its left).
Any help? Thanks!
Since the width of the div is 100%, there should never be an overflow, since the div will always fit 100% of the viewport (assuming you haven't changed the size of your body tag).
As for the padding, the padding is added on after the width, so you're saying the div is 100% of the width of it's container (the body tag), and the padding is an additional 300px to the right, which will be invisible as it's out of the viewport.
You might want to try giving the div an explicit size width and experiment that way.
It may help to see an example of your markup as well, to get an idea of what you're trying to achieve.
More HTML/CSS would be useful, but given what you have right now, my first thought is that your wrapper is still set to position: static (the default for HTML elements).
If you add position: relative to your wrapper, it will contain the absolutely-positioned element within it, and should constrain it to the overflow restrictions.
Additionally, you may want to look into the box-sizing property and how the W3C box model works. In short, your padding is adding to the width of the element, so it's actually (100% + 300px), which results in a size that is larger than the container.
If you don't want to mess with box-sizing, you can also add max-width: 100% to your absolute div to force it to not grow out of its container.
I'm trying to set the div height of the separate parent columns (and their children) to 100% but it doesn't seem to be working because the div height mysteriously just resets to 0.
The first column has two child boxes (if I'm describing it correctly) which would take 50% (separately) of the page height. The second and third have one child box each which would both take 100% of the page height.
In addition to this I want to add a place holder for the logo on the top left of the page and a footer at the bottom of the page. With all of the above it seems a bit daunting. Would appreciate your advice.
In the end it should look like this:
I've uploaded it here: http://jsfiddle.net/methuselah/qtmJW/
Use height: 100%; on #wrapper
Note : Also remove overflow: hidden; from #wrapper
My fiddle
Edit : New Fiddle
I'm trying to split a div in two side by side divs. I know that has several examples here, but I already searched and not found one that permit that the divs take all available space in vertical, without any content.
Take a look http://jsfiddle.net/kpDDM/3/
To set a percentage height to your divs, their parent element must have a specific height. In this case it appears you want it based on the viewport height. To achieve this, every ancestor div must have a height of 100%:
*, html, body, .parent {
height: 100%;
}
JS Fiddle: http://jsfiddle.net/kpDDM/6/
Add within your div tags. Because they're 100% rather than fixed pixels, they need something inside to make them visible.
If you want to make the div tags 100% of the page, then you need to state the page is 100% (so the div tags understand what 100% is).
* { height:100%; }
Changing the body and html tags to 100% is not necessary.
Your parent divider takes a %height even though it's parent container, body, does not have an explicit height amount. This infers that your parent divider overrides with height:auto instead, leaving you without the height you wish.
You'll need to declare a fixed height for parent if you wish for this to work. Modern browsers today do not support default explicit height amounts for the parent body.
Thus, you'll need to make sure you explicitly define your html and body dividers heights like so:
html, body {
height:100%;
}
Enjoy and good luck!