0

サイドバーとコンテンツ領域があり、それぞれに固有の背景色があります。どちらも浮いているので、2つを同じサイズにして、一番下まで広げることができません。jQueryを使用して、各列の高さを決定し、同じ高さになるように他の列のサイズを自動化できると考えましたが、スクリプトはピクセル単位の値を返すため、直接比較することはできません。

別の、おそらくもっと良い方法がありますか、あなたは私にアドバイスすることができますか？

// Sample code:
var left_bar = $("#left_bar").css("height");
var content_area = $("#content_area").css("height");
if(left_bar > content_area) {
    $("#content_area").attr("height",left_bar);
} else {
    $("#sidebar").attr("height",content_area);
}
4

3 に答える 3

1

.height()代わりに使用する必要がありますattr('height', left_bar)-これにより、数値が得られます。

var a = $('#left_bar'), b = $('#content_area');

if (a.height() > b.height()) {
 b.height(a.height()); 
} else {
 a.height(b.height()); 
}

デモ： http： //jsbin.com/olopuy/1/edit

また、JSがなくても必要なものを入手できる場合があります。http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacksを参照してください

于 2012-10-24T18:53:18.850 に答える
0 
var left_bar = $("#left_bar").height();
var content_area = $("#content_area").height();
if(left_bar > content_area) {
    $("#content_area").attr("height",left_bar);
} else {
    $("#sidebar").attr("height",content_area);
}

後ろにpxが付いた数字の代わりに数字が表示されます。

于 2012-10-24T18:54:17.120 に答える
0

これは、いくつかのトリックを組み合わせて、ほんの数行のコードですべてを実行するソリューションです。

$c = $('#left_bar,#content_area');
$c.height( Math.max.apply( // find the max of all elements in an array
    Math, $.map($c,function(v){   // build an array of heights
        return $(v).height(); 
    })
));

これは1行に圧縮することもできます：

$c = $('#left_bar,#content_area');
$c.height(Math.max.apply(Math,$.map($c,function(v){return $(v).height();})));
于 2013-01-21T19:46:41.147 に答える