[英]Full height of a html element (div) including border, padding and margin?
[英]Set absolute height (offsetHeight) of HTML containers that use CSS padding, margin and border by Javascript
我想做类似设置offsetHeight(offsetHeight是只读属性)的操作-将3 div(“ d1”,“ d2”,“ d3”)放入一个容器(“ c”)中:
<!DOCTYPE HTML>
<html>
<body>
<style type="text/css">
.c {
background-color:#FF0000;
overflow:hidden;
}
.d {
left:10px;
border:9px solid black;
padding:13px;
margin:7px;
background-color:#FFFF00;
}
</style>
<div class="c" id="c">
<div id="d1" class="d">text text text</div>
<div id="d2" class="d">text text text</div>
<div id="d3" class="d">text text text</div>
</div>
<script type='text/javascript'>
var h=600;
var hd = Math.floor(h/3);
var c = document.getElementById("c");
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
var d3 = document.getElementById("d3");
c.style.height=h +"px";
d1.style.height=hd +"px";
var hd2 = (2 * hd - d1.offsetHeight) +"px";
d1.style.height=hd2;
d2.style.height=hd2;
d3.style.height=hd2;
</script>
</body>
</html>
但是-首先:盒子不适合完美:-(其次,样式不好。您知道如何将3格(“ d1”,“ d2”,“ d3”)放入一个容器(“ C”)?
=>我也不知道如何读取CSS属性“ padding”和“ margin”
alert(d1.style.paddingTop);
不起作用(可能是因为它是由CSS类定义的,而不是直接的)
谢谢你:-)问候托马斯
您使用哪种浏览器以及使用哪种DOCTYPE
决定了块元素的默认框模型。 通常,默认值为content-box
,这意味着填充,边框和边距都会增加高度/宽度,因此,如果您将box content-box
model作为content-box
则需要将其纳入计算。
另一个选择是,您可以使用box-sizing
CSS属性将box模型更改为border-box
。 这意味着填充和边框包括在高度和宽度中,并且只有边距增加了它们。 我认为,这种盒式模型通常是执行我想要的操作时更方便的一种,因此我通常会切换。
参考:
经过一些测试,我找出了以下解决方案:(适用于:Opera,Firefox和Google Chrome)(框大小:使用JavaScript不能在Firefox上使用!!)
<!DOCTYPE HTML>
<html>
<body>
<style type="text/css">
.c {
background-color:#FF0000;
overflow:hidden;
margin:0px;
padding:0px;
}
.d {
left:10px;
border:13px solid black;
padding:7px;
margin-bottom:13px;
margin-top:4px;
background-color:#FFFF00;
}
</style>
<div class="c" id="c">
<div id="d1" class="d">text text text</div>
<div id="d2" class="d">text text text</div>
<div id="d3" class="d">text text text</div>
</div>
<script type='text/javascript'>
///////////////////////////////////////////
// see: http://stackoverflow.com/questions/1601928/incrementing-the-css-padding-top-property-in-javascript
function getStyle(elem, name) {
if (elem.style[name]) {
return elem.style[name];
}
else if (elem.currentStyle) {
return elem.currentStyle[name];
}
else if (document.defaultView && document.defaultView.getComputedStyle) {
name = name.replace(/([A-Z])/g, "-$1");
name = name.toLowerCase();
s = document.defaultView.getComputedStyle(elem, "");
return s && s.getPropertyValue(name);
}
else {
return null;
}
}
///////////////////////////////////////////
var c = document.getElementById("c");
var d1 = document.getElementById("d1");
var d2 = document.getElementById("d2");
var d3 = document.getElementById("d3");
var paddingY = parseInt(getStyle(d1, 'paddingTop'),10) + parseInt(getStyle(d1, 'paddingBottom'), 10);
var marginTop = parseInt(getStyle(d1, 'marginTop'),10);
var marginBottom = parseInt(getStyle(d1, 'marginBottom'),10);
var marginMax = Math.max(marginTop, marginBottom);
var borderY = parseInt(getStyle(d1, 'borderTopWidth'),10) + parseInt(getStyle(d1, 'borderBottomWidth'), 10);
var h=600;
var count=3;
var hd = Math.floor((h-marginMax*(count-1) - marginTop - marginBottom - (paddingY + borderY) *count) / count) ;
c.style.height=h +"px";
d1.style.height=hd +"px";
d2.style.height=hd +"px";
d3.style.height=hd +"px";
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.