[英]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/ 问题的一个例子是: http : //jsfiddle.net/yjjRW/1/
inner div because of 100% height and margin/padding is overflowing onto next row. 内部div由于100%高度和边距/填充溢出到下一行。 simple stuff..div inside td needs to be 100%, with some padding and margin.
简单的东西.dd里面的dd需要100%,有一些填充和边距。 divs inside all tds in the same row needs to be of same height.
同一行中所有tds内的div需要具有相同的高度。 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%.
所以给它顶部和底部5%的填充,然后将高度设置为90%。
CSS3 add to a DIV CSS3添加到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. 或者您可以使用JS解决方案,这有点尴尬。 After page loads, check offsetHeight of each TD and set it to the its firstChild (nested DIV).
页面加载后,检查每个TD的offsetHeight并将其设置为firstChild(嵌套DIV)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.