Установите абсолютную высоту (offsetHeight) контейнеров HTML, которые используют заполнение CSS, поля и границы с помощью 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 div ("d1", "d2", "d3") в один контейнер (" с ")?

=> также я не знаю, как читать свойства CSS "padding" и "margin"

 alert(d1.style.paddingTop);

не работает (возможно, потому что это определяется css-классом, а не прямым)

Спасибо:-) С наилучшими пожеланиями Томас

Источник

2 ответа

Решение

После некоторого тестирования я разобрался с этим решением: (работает с: Opera, Firefox и Google Chrome) (размер коробки: не работает в Firefox при использовании 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://stackru.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>
Источник

Какой браузер вы используете и какой DOCTYPE Вы определяете модель блока по умолчанию для элементов блока. Обычно по умолчанию content-box, что означает, что отступы, границы и поля увеличивают высоту / ширину, поэтому вам необходимо учесть это в своих вычислениях, если у вас есть блочная модель как content-box,

Другой вариант, вы можете изменить модель коробки на border-box с использованием box-sizing CSS свойство Это означает, что отступы и границы включены в высоту и ширину, и к ним добавляется только поле. На мой взгляд, эта модель обычно более удобна для выполнения того, что я хочу, поэтому я обычно заканчиваю переключением.

Ссылка:

Источник
Другие вопросы по тегам