CSS Fill parent div 100% cleanly

Question

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.

Breastfeed

You should look into box-sizing: border-box; – Antabuse

Yeah, just noticed that while I was building my fiddle jessegavin gave the "short version" answer here in his comment. – Terpsichore

Answer 1

-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+).

Terpsichore

This does not appear to work if the parent has padding instead. This is your exact fiddle simply changed the div margin to padding, Do you know how to achieve the same results with padding? thanks. – Increase

@Jake: Given the extra constraint of how the parent div is configured, if you cannot (or do not want to) remove the padding off of it, then probably your only option is to use positioning to achieve it. Which may or may not be desirable also, depending upon the situation. – Terpsichore

Answer 2

To make this work, you have to calculate the paddings and margins value by adding the 2xwidth of the span plus the height. then you can know what values to use for span to make it fill the parent div. check the examples here http://www.phcityonweb.com/tutorial/css-programming-lessons/margin-padding

Hexavalent