Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Fill parent div 100% cleanly

I want to be able to fill a parent's div exactly 100% with a child span. The problem is the span that I want to fill it with is themed with themeroller and it has varying padding, and margins. So I cannot hard code any sizes for the height of the span.

If I try to set the height of the span to 100% then it actually goes over and fills more like 100% + 6 pixels for this theme (but the over amount varies by theme). How do you make it so no matter what size the padding/margins for the span it will only ever fill 100% of the parent div?

Thank you very much for the help.

like image 392
w.donahue Avatar asked Dec 03 '11 03:12

w.donahue


1 Answers

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;    
box-sizing: border-box;

See http://jsfiddle.net/mbB8t/2/

Clarified: Works for all modern browsers (IE8+).

like image 186
ScottS Avatar answered Sep 30 '22 12:09

ScottS