4

一連のdivを並べて作成しました（実際にはHTML5セクションを使用していますが、ソリューションと動作はまったく同じであると想定しています）。それらは、右側にフォームフィールドがあり、左側に要約タイトルと情報が入ったコンテナに座っています。構造は次のようになります。

<div id="container">
    <div id="left" >Summary here</div>
    <div id="right">Form fields here</div>
</div>

キャッチは、JavaScriptで実行されたアクションに応じてさまざまなフィールドを非表示または表示する必要があるため、右側とコンテナーの実際の高さが静的ではないことです。必要なのは、左側が右側に一致するようにコンテナの高さを満たすようにすることです。私はインターネット上で数多くの解決策を試しましたが、どれも機能していないようです。

前もって感謝します！

4

1 に答える 1

4

これは非常に一般的な質問です。この記事を見てください...それはすべての答えを持っています：

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

さて、これを使用するための簡単なフィドルです。「列番号」のテキスト要素のいずれかをクリックして、ドキュメントから削除してみてください...列のサイズが適切に変更されます:)

http://jsfiddle.net/UnsungHero97/qUT3d/9/

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

CSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}​
于 2012-09-25T00:03:45.280 に答える