1

次のスクリプトを使用します。

<script type="text/javascript">
    window.document.onload = function(e){
        var aheight = document.getElementById("a").offsetHeight;
        var bheight = document.getElementById("b").offsetHeight;
        if(aheight > bheight) {
            document.getElementById("b").offsetHeight = aheight;
        }else {
            document.getElementById("a").offsetHeight = bheight;
         }
    }
</script>

HTML:

<div>
    <div id="a" class="grid_6" style="background-color: #ff00ff">
        <div class="block-border">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        </div>
    </div>
    <div id="b" class="grid_6" style="background-color: #ffff00">
        <div class="block-border">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        </div>
    </div>
</div>

およびCSS:

.grid_6 {
    width: 200px;
    display:inline;
    float: left;
    margin-left: 0.99%;
    margin-right: 0.99%;
}

これを使用して、ページの 2 つの DIV 間の高さを等しくします。このスクリプトをできるだけ早く動作させるには、このスクリプトを配置するのに最適な場所を教えてください。また、window.document.onload はこれに最適なトリガーですか? 別の方法として、要素 ID "a" と "b" がロードされている DIV でトリガーできますか? DIVS の変更がサイズであることをユーザーが見ないようにしたいだけです。

4

3 に答える 3

1

パディング用の空のセルを持つテーブル内のテーブル内のテーブルは良くありませんが、テーブル関連のCSSの使用はまったく問題ありません。このCSSのみのソリューションを検討してください。

<div id="parent">
    <div class="grid_6">
        <!-- content -->
    </div>
    <div class="grid_6">
        <!-- content -->
    </div>
</div>

CSS：

#parent{
  display: table-row
}

.grid_6{
  display: table-cell
  width: 50%;
}

フィドル： http： //jsfiddle.net/NqXgd/

display: table;を含む要素が存在する必要はないことに注意してください。ブラウザは匿名要素を自動的に挿入します。を記述して、セルスタイルのの周りに#parent{display:table}匿名を挿入することもできます。table-rowdiv

明示的な幅を設定しない場合、ブラウザはそれらを自由に選択できることに注意してください（たとえば、高さを等しくするため）。これは有益な場合があります。または、レイアウトを制限するためにいくつかの幅を明示的に設定することもできます。

于 2013-02-13T16:54:20.997 に答える
0

オフセット サイズは読み取り専用です。スクリプトで高さを変更するには、要素のstyle.heightをオフセット番号 +'px'に設定する必要があります。

于 2013-02-13T17:01:34.787 に答える
0

サイズが外部リソースに依存しaてbいない場合、イベントを待つ必要はありません。loadこれを本体の最後 (またはサイズに影響を与える可能性のある要素の定義の後の任意の場所) に配置するだけです。とa) b:

<script type="text/javascript">
var aheight = document.getElementById("a").offsetHeight;
var bheight = document.getElementById("b").offsetHeight;
if(aheight > bheight) {
    document.getElementById("b").style.height = aheight+'px';
}else {
    document.getElementById("a").style.height = bheight+'px';
 }
</script>

デモンストレーション

要素の を変更できないため、に変更offsetHeight =したことに注意してください。style.height =offsetHeight

于 2013-02-13T16:43:31.770 に答える