Set absolute height (offsetHeight) of HTML containers that use CSS padding, margin and border by Javascript_问答_开发者

Set absolute height (offsetHeight) of HTML containers that use CSS padding, margin and border by Javascript

开发者 https://www.devze.com 2023-04-09 07:28 出处：网络

I want to do something like setting offsetHeight (offsetHeight is a read only property) - fit 3 div (\"d1\", \"d2\", \"d3\") into one container (\"c\"):

I want to do something like setting offsetHeight (offsetHeight is a read only property) - fit 3 div ("d1", "d2", "d3") into one container ("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")?

=> also I dont know how to read the css properties "padding" and "margin"

 alert(d1.style.paddingTop);

doesn't work (maybe because it is defined by css-class and not direct)

Thank you :-) Best regards Thomas

Which browser your using and what DOCTYPE you have determines the default box model for block elements. 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.

Another options is, you can change the box model to border-box using the box-sizing CSS property. 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:

https://developer.mozilla.org/En/CSS/Box-sizing
https://developer.mozilla.org/en/CSS/box_model

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?!)

<!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>