わかりましたので、同じ div の高さを取得することはかなりのプロセスであることがわかりました。やり方はいろいろあるようです。私はCSSを使いたいのですが、私はそれがかなり苦手なので、誰かが私に手を差し伸べてくれることを望んでいました.
これが私の基本的なレイアウトです。 http://jsfiddle.net/SineMetu/nWXyu/1/
(CSS の大量の背景グラデーションについては申し訳ありません)
すべての div を最も高い div の高さにしたいと思います。ページのサイズが変更されると、高さを動的に (流動的に) 変更できるようにする必要があります。したがって、基本的に、ページ上のすべての div は、サイズが変更されると、最も高い div に合わせて調整されます。
これを行う最善の方法は何ですか？
最新の* ブラウザーで同じ高さの列を作成する最もエレガントな方法は、それぞれを次のように設定することです。display: table-cell;
<div id="page">
<div class="column one">one</div>
<div class="column two">two</div>
<div class="column three">three</div>
</div>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
div#page {
display: table;
table-layout: fixed; /* this prevents column width from changing with content */
width: 100%;
height: 100%;
}
div.column {
display: table-cell;
width: 33%;
height: 100%;
}
div.one {
background-color: #CCC;
}
div.two {
background-color: #999;
}
div.three {
background-color: #666;
}
</style>
*) 基本的に、これは IE 6 と 7 を除くすべてのブラウザで動作します。
css と html の両方を使用して、両方の div で同じ高さを実現します。
<div class="container">
<div class="equal-height"></div>
<div class="equal-height"></div>
</div>
.container { overflow: hidden; }
.equal-height { margin-bottom: -99999px; padding-bottom: 99999px !important; }
cssテーブルを使用して目的の結果を得ることができます。理解しやすいデモを参照してください:- http://jsfiddle.net/nWXyu/5/