设置Java容器使用CSS填充，边距和边框的HTML容器的绝对高度（offsetHeight）

Question

I want to do something like setting offsetHeight (offsetHeight is a read only property) - fit 3 div ("d1", "d2", "d3") into one container ("c"): 我想做类似设置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>

but - first: the boxes doesn't fit perfect :-( and secondly the style is bad. Do you have a idea how to fit the 3 div ("d1", "d2", "d3") into one container ("c")? 但是-首先：盒子不适合完美：-（其次，样式不好。您知道如何将3格（“ d1”，“ d2”，“ d3”）放入一个容器（“ C”）？

=> also I dont know how to read the css properties "padding" and "margin" =>我也不知道如何读取CSS属性“ padding”和“ margin”

 alert(d1.style.paddingTop);

doesn't work (maybe because it is defined by css-class and not direct) 不起作用（可能是因为它是由CSS类定义的，而不是直接的）

Thank you :-) Best regards Thomas 谢谢你:-)问候托马斯

Answer 1

Which browser your using and what DOCTYPE you have determines the default box model for block elements. 您使用哪种浏览器以及使用哪种DOCTYPE决定了块元素的默认框模型。 Usually, the default is content-box , which means that the padding, border, and margin all add to the height/width, so you'll need to factor that into your calculations if you have the box model as content-box . 通常，默认值为content-box ，这意味着填充，边框和边距都会增加高度/宽度，因此，如果您将box content-box model作为content-box则需要将其纳入计算。

Another options is, you can change the box model to border-box using the box-sizing CSS property. 另一个选择是，您可以使用box-sizing CSS属性将box模型更改为border-box 。 This means that the padding and border are included in the height and width, and only the margin adds to them. 这意味着填充和边框包括在高度和宽度中，并且只有边距增加了它们。 In my opinion, this box model is usually a more convenient one for doing what I want, so I usually end up switching. 我认为，这种盒式模型通常是执行我想要的操作时更方便的一种，因此我通常会切换。

Reference: 参考：

Answer 2

After some testing I figure out this solution: (works with: Opera, Firefox and Google Chrome) (box-sizing: doesn't work on Firefox when used JavaScript?!) 经过一些测试，我找出了以下解决方案：（适用于：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>

设置Java容器使用CSS填充，边距和边框的HTML容器的绝对高度（offsetHeight）

问题描述

2 个解决方案

解决方案1
0 2011-09-30 12:31:41

解决方案2
0 已采纳 2011-10-05 14:23:18

设置Java容器使用CSS填充，边距和边框的HTML容器的绝对高度（offsetHeight）

问题描述

2 个解决方案

解决方案1 0 2011-09-30 12:31:41

解决方案2 0 已采纳 2011-10-05 14:23:18

解决方案1
0 2011-09-30 12:31:41

解决方案2
0 已采纳 2011-10-05 14:23:18