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

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"):

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

Did you mean to type `overflow: hidde;` on your `.c` class, or is it a typo? It should be `overflow: hidden;`. — FishBasketGordo, Sep 30 '11 at 12:25

FishBasketGordo · Answer 1 · 2011-09-30T12:38:45.933

1

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:

edited Sep 30 '11 at 12:38

answered Sep 30 '11 at 12:31

FishBasketGordo

22,468
4
58
91

Thank You :-) - i add the DOCTYPE to my example... but how to read the css properties "padding" and "margin" alert(d1.style.padding); doesn't work (maybe because it is defined by css-class and not direct) – Thomas Sep 30 '11 at 13:32
You can't access the shortcut CSS properties from Javascript. You'll have to access them like this: `d1.style.paddingLeft`, `d1.style.paddingTop`, etc. – FishBasketGordo Sep 30 '11 at 15:02

Thomas · Accepted Answer · 2011-10-05T14:33:04.390

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>

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

2 Answers2