1

私は3つのdivを持っています：

.main_content、.content_top、.content_bottom

.main_contentは100％に設定されていますが、100％はブラウザウィンドウのサイズではなく、ページの中央にあります。

.content_topは60％の高さに設定されています。

.content_bottomの高さを、javascriptを介して.main_content内で使用可能な残りのスペースに設定したいと思います。

たとえば、.main_contentの高さが800ピクセルで、.content_topの高さが600ピクセルの場合、.content_bottomを200ピクセルに設定します。

これは単純化された例です。私の状況は、40％を指定したり、ブラウザに決定を任せたりするほど簡単ではありません。1つは、現在.content_topに46pxのパディングがあります。.content_topと.content_bottomの間のインターフェイスのような分割画面を実行して、バーをドラッグして両方のサイズを変更しています。これはほとんど機能しており、下部に問題があります。.content_bottomを特定の高さ（つまり198px）に設定できると、現在のすべての問題が解決します。この例を詳しく説明し、実際のコードを掘り下げて喜んでいますが、これを計算する簡単な方法があることを期待しており、クロスブラウザーで機能する良い例を見つけるのに苦労していました。ありがとうございます。

4

2 に答える 2

2

（ライブラリではなく）バニラJavaScriptを使用していると仮定すると、次のことをお勧めします。

​var cBs = ​document.getElementsByClassName('content_bottom');

for (var i=0,len=cBs.length; i<len; i++){
    var p = cBs[i].parentNode;
    cBs[i].style.height = (parseInt(p.offsetHeight,10) - parseInt(p.getElementsByClassName('content_top')[0].offsetHeight,10)) + 'px';
}​​​​​​​​​​

JSフィドルデモ。

于 2012-04-13T22:57:01.363 に答える
1

シンプルなjQueryソリューション：

$("content_bottom").css({"height": $("main_content").height() + $("content_top").height());
于 2012-04-13T22:46:54.913 に答える