0

私はoffsetHeightを設定するようなことをしたい（offsetHeightは読み取り専用のプロパティです） - 3つのdiv（ "d1"、 "d2"、 "d3"）を1つのコンテナ（ "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") を 1 つのコンテナー (" c")?

=> また、css プロパティの「パディング」と「マージン」の読み方がわかりません

 alert(d1.style.paddingTop);

動作しません (おそらく、css-class によって定義されており、直接ではないため)

ありがとう:-)よろしくトーマス

4

2 に答える 2

1

使用しているブラウザーと使用しているブラウザーDOCTYPEによって、ブロック要素の既定のボックス モデルが決まります。通常、デフォルトは ですcontent-box。これは、パディング、ボーダー、およびマージンがすべて高さ/幅に追加されることを意味するため、ボックス モデルが の場合は、それを計算に含める必要がありますcontent-box。

もう 1 つのオプションは、ボックス モデルをCSS プロパティをborder-box使用するように変更することです。box-sizingこれは、パディングとボーダーが高さと幅に含まれ、マージンのみがそれらに追加されることを意味します。私の意見では、このボックス モデルは通常、自分がやりたいことを行うのにより便利なモデルであるため、通常は切り替えることになります。

参照：

于 2011-09-30T12:31:41.707 に答える
0

いくつかのテストの後、私はこの解決策を見つけました: (動作: Opera、Firefox、および Google Chrome) (box-sizing: 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>
于 2011-10-05T14:23:18.290 に答える