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.
Related
At the moment I have a large <div> that I'd like to add a bottom margin to, to push it up from the bottom of the page. However this currently has no effect because its parent, the <body> tag, is smaller than it, as you can see here:
The body tag is highlighted in blue and brown, but you can see my div (the white border) extending below it.
However if I apply the trick of setting the <body> and <html> tags to height: auto and min-height:100% to make sure they fill the entire page, all of my inner content loses its size, because they all use percentage heights and no longer have a parent with a fixed height.
How can you use percentage heights if the parent tag has a height of auto?
I'm afraid you can't do this. A percentage height on an element only works if the parent element has a specific height. See also: CSS – why doesn’t percentage height work?
I'm noticing that display:table on a div will cause its width calculation to have rounding issues, which is odd because I am sizing at 100%.
http://jsbin.com/obidun/2/edit
Note that the upper section has a div with width of 55%, with a nested display:table div of width 100%. The nested div does not extend to the edge of its parent (note the white bleed-through of the parent div).
The lower section is exactly the same, except the nested div is not set to display:table, and there is no bleed through.
Why does display:table affect the width calculation, especially at 100%? Is there a way for me to work around this? My current thought is to just set the width to 101% and set overflow to hidden...
Note: I am using Chrome. IE seems to be okay, at least at the given size.
Percentage units are converted to pixels internally and each browser does it differently. If the solution works today, go with it, but be aware it may not apply tomorrow.
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.
I wanted the .cols inside .row to inherit .row's height and make the .cols be fixed inside the .row.
Here's the fiddle..
http://jsfiddle.net/Hhf8R/
My idea is to make it like a table but using divs.
like this : http://jsfiddle.net/hhUtb/
in order for divs to be 100% of the height of their parent, the parent has to have a defined height.
the browser can't calculate 100%(or inherit) of something that hasn't been fully rendered yet.
You need to set the height CSS property on the parent if you want the child to inherit it.
If you're wanting your height to be dynamic based on the content, that is something that isn't trivially achieved with CSS unfortunately. There are a couple different methods; this one seems like a good place to start.
You need an explicit height on the parent row in order for inherit to have a meaning.
Add a height declaration to your row:
http://jsfiddle.net/LzkgU/
and the floated columns do inherit the parent's height.
(Sidenote: There will be people who tell you that floats can't inherit heights:
CSS - make div's inherit a height
but that ain't necessarily so.)
You can fix the height of your content in js by checking changement that could transform your content.
For example, I have an Html Editor that animate a cursor by using setTimeout. While cursor animates, I change the height of my cell if needed.
I'm trying to make a box with rounded corners where the height and width of the div depends on the content, so it's automatically adjust to it...
You can see the example here: http://pastehtml.com/view/1duizyf.html
The problem is that i can't get the "test_mid_left" (black background) and "test_mid_right" (turquoise background) to inherit the height from the "test_mid_center" (green background). I have tried height: 100% and auto, but none of thoose work. So how do I get them to inherit the height from the content?
(The reason why I have used "min-height: xx" in the left and right content on the example is just to show which boxes I am talking about)
As already mentioned this can't be done with floats, they can't inherit heights, they're unaware of their siblings so for example the side two floats don't know the height of the centre content, so they can't inherit from anything.
Usually inherited height has to come from either an element which has an explicit height or if height: 100%; has been passed down through the display tree to it.. The only thing I'm aware of that passes on height which hasn't come from top of the "tree" is an absolutely positioned element - so you could for example absolutely position all the top right bottom left sides and corners (you know the height and width of the corners anyway) And as you seem to know the widths (of left/right borders) and heights of top/bottom) borders, and the widths of the top/bottom centers, are easy at 100% - the only thing that needs calculating is the height of the right/left sides if the content grows -
This you can do, even without using all four positioning co-ordinates which IE6 /7 doesn't support
I've put up an example based on what you gave, it does rely on a fixed width (your frame), but I think it could work with a flexible width too? the uses of this could be cool for those fancy image borders we can't get support for until multiple background images or image borders become fully available.. who knows, I was playing, so just sticking it out there!
proof of concept example is here
The Problem
When an element is floated, its parent no longer contains it because the float is removed from the flow. The floated element is out of the natural flow, so all block elements will render as if the floated element is not even there, so a parent container will not fully expand to hold the floated child element.
Take a look at the following article to get a better idea of how the CSS Float property works:
The Mystery Of The CSS Float Property
A Potential Solution
Now, I think the following article resembles what you're trying to do. Take a look at it and see if you can solve your problem.
Equal Height Columns with Cross-Browser CSS
I hope this helps.
The negative margin trick:
http://pastehtml.com/view/1dujbt3.html
Not elegant, I suppose, but it works in some cases.
You need to take out a float: left; property... because when you use float the parent div do not grub the height of it's children... If you want the parent dive to get the children height you need to give to the parent div a css property overflow:hidden;
But to solve your problem you can use display: table-cell; instead of float... it will automatically scale the div height to its parent height...
Most of the times, the Previous parent has a heigt manually set, so you can use that value as reference, no other dirty tricks will be needed, and if the number is not the same for any reason maybe a comment can be added with the original number so in case you need to change it, by searching at the all the values, this one can be adjusted or even changed, in the time someone resolve this one for us.