Установите абсолютную высоту (offsetHeight) контейнеров HTML, которые используют заполнение CSS, поля и границы с помощью Javascript - PullRequest
Новая
       27

Установите абсолютную высоту (offsetHeight) контейнеров HTML, которые используют заполнение CSS, поля и границы с помощью Javascript

0 голосов
/ 30 сентября 2011

Я хочу сделать что-то вроде установки 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 ]

0 голосов
/ 05 октября 2011

После некоторого тестирования я выясняю это решение: (работает с: 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: /854513/uvelichenie-svoistva-css-padding-top-v-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>
0 голосов
/ 30 сентября 2011

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

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

Ссылка:

...