problem with div with 100% height and padding inside a td with 100% height

An example of issue is here: http://jsfiddle.net/yjjRW/1/

inner div because of 100% height and margin/padding is overflowing onto next row. simple stuff..div inside td needs to be 100%, with some padding and margin. divs inside all tds in the same row ne开发者_高级运维eds to be of same height. I cannot set explicit height on them because their content is decided at runtime.

I can settle for a jQuery fix to this as well.

Thanks

Set the padding using percents rather than pixels. So give it a 5% padding for the top and bottom, then set the height to 90%.

http://jsfiddle.net/yjjRW/2/

CSS3 add to a DIV

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

Other approach would be use of positioning.

td {
  position: relative;
}
div {
  position: absolute;
  top: 5px;
  ....
}

Or you can use JS solution which is a bit awkward. After page loads, check offsetHeight of each TD and set it to the its firstChild (nested DIV).