0

したがって、3 つのフローティング列があります。

例: http://jsfiddle.net/A9dqD/

html, body {height: 100%;}
#a {
    float: left;
    height: 100%;
    width: 50%;
    background-color: green;
}
#b {
    float: left;
    height: 100px;
    width: 50%;
    background-color: blue;
}
#c {
    float: left;
    height: 300px;
    width: 50%;
    background-color: red;
}

私が達成したいのは、列 A を列 C と同じ長さ (高さ) にすることです (背景を一致させることができます)。

ご覧のとおり、列を画面の 100% (高さ) にすることはできません。Body はビューポートの 100% (高さ) を取得しますが、ドキュメント全体の高さは取得しないため、列aはビューポートと同じ高さになります。

これが実際の例です: http://mac.idev.ge:800/wp1/

高さを手動で設定するためにjqueryを使用したくありません。これを行うための簡単なcssトリックがあると思います...そしてそれを見つけるにはあなたの助けが必要です:)

ありがとう！

4

2 に答える 2

2

#a100% の高さを持ち、正確に 100px にしたいと仮定すると#b、次のように実行できます#c。

#c { height: calc(100% - 100px); }

jsフィドル

PS: すべてのブラウザーが をサポートcalc()しているわけではないため、 を使用する前にフォールバックの高さの値を設定する必要がありますcalc()。

于 2013-10-05T09:30:20.713 に答える
0

col b には、ピクセルの代わりにパーセンテージを使用できます。col b が 20% で col c が 80% の場合、col a の 100% と一致します。col b が正確に 100px である必要がない場合。cal() を使用すると、これをサポートするブラウザーを含むページが次のようになります: http://caniuse.com/calc

于 2013-10-05T10:53:24.660 に答える