5

さて、私はそのような単純なdiv構造を持っています：

<div id="wrapper">
    <div id="1" class="block">
    1            
    </div>
    <div id="2" class="block">
    2
    </div>
</div>

JSフィドル

のコンテンツは#1javascriptによって動的に変更でき、その高さはコンテンツに応じて変更できます。私が欲しいのは#2、と同じ高さを作ることです#1。この目的でJavaScriptを使用できることは理解していますが、CSSのみを使用したり、divの位置を変更したりして、これらのdivの高さを等しくするためのトリッキーな方法はないはずです。

4

2 に答える 2

7

私のコメントを拡張するために、意味的にそれを行うことはできません。100％の高さを偽造するには、ちょっとしたトリックを使用する必要があります。これはフェイクカラムと呼ばれ、ここで詳細を読むことができます。

あなたの場合、いくつかのバックグラウンドdivを追加することで、それを偽造することができます。

<div class="background bg1"></div>
<div class="background bg2"></div>

次に、CSSを次のように変更します。

#wrapper {
    border: 1px solid black;
    position: relative;
}

#wrapper:after {
    display: block;
    content: " ";
    height: 0;
    clear: both;
}

.block {
    position: relative;
    float: left;
    vertical-align: top;
    width: 200px;
    text-align: left;
    min-height: 200px;
    padding-left: 20px;
    z-index: 2;
}

.background {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 200px;
    z-index: 1;
}

.bg1 {
    background-color: #eee;
}

.bg2 {
    left: 200px;
    background-color: #aaa;
}​

これが動作するjsFiddleです。

于 2012-12-15T19:38:28.590 に答える
1

jQueryの方法：.height（）を使用してDiv1の高さを返し、次に.css（）を使用してDiv2をDiv1の高さに設定します。div 1が変更されると、resizeイベントを使用して、div2の高さを変更する関数をトリガーできます。

CSSの方法：ChristianVargaの答えは完璧に機能しているようです。

于 2012-12-15T19:26:47.533 に答える