Is there an alternate way to fill the available space of nested divs in Google Chrome? Firefox's -moz-available does just that, but takes margins, paddings and scrollbars into consideration. There is no -webkit-available, though.
-
Care to share an example, please?– Pedro CorreiaCommented May 10, 2011 at 11:47
-
Test case: I have two divs, one inside of another. The one on the inside has margins, padding and borders. In order to fill the width of the outer div with the on on the inside, I just put width:-moz-available; and don't have to calculate anything. Putting 100% for the width of the inner div will not work because of the padding, margins and borders - it will be wider. In webkit, "width:-webkit-available" doesn't work.– VancoCommented May 12, 2011 at 7:12
Add a comment
|
3 Answers
Try this.
elem {
width: 100%;
width: -moz-available; /* For Mozzila */
width: -webkit-fill-available; /* For Chrome */
width: stretch; /* Unprefixed */
}
What about this?
box-sizing: border-box;
-
I think that this did the trick. Although, Chrome should include "available"– VancoCommented Apr 22, 2012 at 17:56
-moz-available
= container width - (margin + border + padding) so try width: intrinsic;
.
-
Thanks for the answer. Unfortunately, it's not working. I guess I'll just have to go with calculating the widths in pixels...– VancoCommented May 12, 2011 at 7:02