Please have a look at this fiddle.
This is a very dumbed-down version of a more complex form. In .dojoxAlertBar, the height is set to 100% for programming reasons. Things are all good, until I set the height for #registerform as a set number:
/* height:117px; */
Without this, the height of the message is "as big as it needs to be". However, uncommenting the 117px height in the CSS has the result of making the height of .dojoAlertBox equal to #registerForm.
Can somebody please explain why that is? I keep on misunderstanding how "height" works in CSS. What does that "100%" actually mean? If it means "100% of the containing element", then why isn't it set as "big" even when there is no specified height for the parent?
In fact, if I can beg, having a simple table of how the height is calculated for fixed/absolute and relative/static elements, that would be great too.
WITHOUT this, the height of the message is "as big as it needs to be".
To give an element (.dojoAlertBar) a percentage height, its parent element (#registerForm) must have an explicit height. Since, in your example, .registerForm has a height of auto, the block will take the height of its content.
However, UNCOMMENTING this has the result of making the comment box as big as the #registerForm...What does that "100%" actually mean?
A height of 100% means the element will have a height that is 100% of its parent. Therefore, the parent div must have an explicit height property. When you give #registerForm the height of 117px, that means .dojoAlertBar will be 100% of that height, or 117px.
Related
I have a fixed width and height div element which width/heigth changes when font-size property applied to it, Why?
I thought font-size affects only fonts size but not the container where it sits.
The width and height properties set the desired properties for an element, which means that the element may update it's size to fit the content.
If you wish to be restrict about sizing, you can use the overflow property to update how it handles oversized content.
Examples:
overflow: hidden: everything outside of the width and height won't be displayed
overflow: scroll: the element has a scroll to show what's beyond width and height
https://developer.mozilla.org/en/docs/Web/CSS/overflow
It may also be worth checking out min-width, max-width, min-height and max-heightdepending on your case.
It's probably because of your display properties.
display:table and display:inline both will adapt to your content's size even if you set a fixed width and height.
Try display:flex or display:block on your div and adjust the overflow settings to your will (if you want the overflowed content to show or not) and you should be good.
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 a div C which height is set up using max-height. This div contains a div D.
I want the contained div D to have the exact same height (and not more) than the containing div C.
If I use the height property for div C, like here
the height of the div C is set up using height: 90%
the height of div D is set up using height: 100%
Then, Everything works fine, and the height of div D equals the
height of div C
If I use the max-height property for div C, like here
the height of the div C is set up using max-height: 90%
the height of div D is set up using height: 100%
Then, the height of div D is not equals to the height of div C (a lot
bigger since the content inside it is very long). In the fiddle, it looks good, but if you inspect div D, you will see it's a lot bigger.
But I need to use the max-height css property, how can I set up the height of div D to be equals to the one of div C only with css?
<div id="container">
<div id="A">
<div id="B">
<div id="C">
<div id="D">
<div id="D1">D1</div>
<div id="D2">
D2 - very long content
</div>
</div>
</div>
</div>
</div>
</div>
Thanks!!!
The reason why things do not work the way you expect is simply because max-height does not set the height of the containing div. All it does is, as its name implies, set a maximum limit to the height of the div.
Here's a quote from the W3 CSS2 specification on how the percentage heights are calculated on block elements. This might help to shed some light on the matter:
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'.
In your case the height of the containing div is not set explicitly and depends on content height, because when you set the max-height of the containing div to 90%, and there is not enough content to stretch the containing div to 90% of the height of its own containing element, the height of the containing div will be less than 90% of the height of its own containing element.
An attempt to explain what I believe is happening
The browser renders the containing div with an initial height of auto, which computes to 0px as there is no content yet. Along comes the contained div which wants to be rendered with a height of 100% of the height of its containing block, the browser realizes that this is ridiculous, as 100% of 0px is exactly 0px again. So it decides to set the height of the contained div to auto instead. If it didn't do so, then the contained div would never be visible, because no matter what happens next, 100% of the containing block's height of 0px is always going to be 0px. Remember that the browser is trying to stick to this part of the rule quoted above:
The percentage is calculated with respect to the height of the generated box's containing block
ONLY NOW along come some more div's which would like to be rendered inside the contained div. At the moment when the previous decisions were made, the browser didn't yet know about these div's, they're a bit late to the party. If the browser was then to backtrack and fix itself up after it had rendered those div's, it would effectively be breaking the part of the rule quoted above. As it would indirectly* be setting the percentage height of the contained div based on the height of its contents.
Because of this the W3 specification people have come up with the second part of the rule. Which lets the browser decide to set the height of the contained div to auto if the height of its containing div is not set (and therefore defaults to auto).
So you could say that those late div's are lucky that the browser has taken some precautions and is still able to render those div's, as it has been preemptive and has set the height of the contained div to auto to accommodate for latecomers.
*by calculating the height of the containing div based on the height of the contents of the contained div, and then basing the percentage height of the contained div on this value.
In conclusion
Browsers are just sticking to the W3 specification, which is a good thing. Your first fiddle works because the browser makers are adhering to the specification, and your second fiddle doesn't work for the exact same reason.
The solution
You can only fix your issue by making sure that the div which you want to have a height of 90% of the browser window is a direct descendant of a div which has its height set to 100% of the browser window. If the ancestor div is not absolutely placed, every ancestor of the div, all the way up to the html document element, would also have to have a height of 100% set on itself.
The line above is true, except if an ancestor is encountered which is absolutely placed (which would take it out of the regular document flow), without this ancestor itself having an ancestor with position: relative set (which would force its absolute positioning to be based on the position of its relatively positioned parent instead of on the height of the browser window), and this ancestor is set to be the height of the browser window (using top: 0px; bottom: 0px;). In that case the running up the DOM tree will stop at the absolutely positioned ancestor.
it's because D is inside of C wouldn't just saying
#D {height: 100%;}
work because that would be telling it to take up 100% of the div it is inside of?
additionally this might help http://css-tricks.com/the-css-box-model/
I have a situation where I am trying to make an element occupy 100% of the height of its container - and the container element only has min-height specified. Unfortunately, when I do this, the height directive is ignored. Here is an example. The "b" div, the red one, should fill the entire parent. It doesn't, not in IE7, Chrome, or FF3.6.
If I had "height: 1px" to the container, the "a" div, then "b" is stretched to the entire height of "a". See here. But this only in FF3.6 and IE7, not in Chrome. So I guess I am doing something wrong here.
I feel like this is a common problem that there must be a solution to that I'm just not seeing. What is the best way to achieve stretch-to-height in this case?
Your CSS means that the child element's height is 100% of the specified height of the parent element. If you do not specify a height for the parent, then the 100% doesn't mean anything. Hence it doesn't work.
What you want can be achieved by using position:relative on the parent and position:absolute on the child:
http://jsfiddle.net/57EZn/25/
It's not a beautiful solution but it does what you are after.
Do elements before they are part of the dom have the width and height set properly? ie if I create a div containing markup can I measure its intended width and height without appending it to the dom?
I don't formally know the answer, but a little gedankenexperiment lets us see that it can't, in general, happen. If you create an HTML element with a fixed width and height, then yes - you can know the width and height.
However, if you don't specify them (or they might not be obeyed), then the width and height are always going to be calculated by the contextual position of the fragment in the DOM; for example, a DIV with width: 50% cannot know it's actual width until it is added to the DOM and laid out - there's no other way to answer "50% of what?".