0

ページの液体レイアウトを設定しようとしていますが、divの高さを調整するのが非常に困難です。画面のサイズに関係なく、ページを手袋のようにフィットさせたいので、固定レイアウトは必要ありません。私はパーセンテージのみを使用しており、ピクセルやemは使用していません。ページのレイアウトは次のようになります。

header
wrapper
  left column, top
  left column bottom
  right column, top
  right column, bottom
footer

次に、左側の列、ページの上部の50％の高さ、左側の列、右側のページの50％の高さを作成します。問題は、コンテンツがオーバーフローしてカットオフになり、スクロールバーを使用してピクセルの高さを設定する必要があることです。これは私が望むものではありません。理想的には、divをページの50％に設定し、コンテンツがオーバーフローした場合はスクロールバーを使用したいと思います。それは理にかなっていますか？

どうすればこれを行うことができますか？助けていただければ幸いです。

どうもありがとうございます。

4

1 に答える 1

2

これはjqueryに適したものになります。これを呼び出して、ロード時およびウィンドウのサイズ変更時に高さのサイズを変更できます。

ウィンドウの高さと幅を取得するには、

windowHeight = $(window).height();
windowWidth = $(window).width();

これを取得して変数に割り当て、ヘッダーとフッターの高さを減算します。そして、を使用してcssを設定します

${'#content_container').css({width: windowwidth+"px", height: windowHeight+"px"});

次に、誰かがウィンドウのサイズを変更した場合、次のような関数で同じオプションを実行します

$(window).resize(function() {
 //update stuff
});

コードは次のようになりますが、変更するとそれぞれに対して同じことが行われます。

$(document).ready(function(){
 windowHeight = $(window).height();
 windowWidth = $(window).width();
 divHeight = (windowHeight - 100 - 100)/2; // heights of your header/footer
 divWidth = windowWidth / 2;
 $('#content_container').css({width: divWidth+"px", height: divHeight+"px"});
});

$(window).resize(function() {
 windowHeight = $(window).height();
 windowWidth = $(window).width();
 divHeight = (windowHeight - 100 - 100)/2; // heights of your header/footer
 divWidth = windowWidth / 2;
 $('#content_container').css({width: divWidth+"px", height: divHeight+"px"});
});

変数を割り当てて$（'＃divid'）。height（）;を呼び出すことにより、高さの静的呼び出しの100を置き換えることができます。ヘッダーはposition：absoluteであるため、ヘッダーを減算する場合は、同じピクセルの上部からdivを配置する必要があります。

jsを呼び出すには、上記のjavascriptの前に以下を含めます。

<script src="http://code.jquery.com/jquery-1.6.4.min.js" />
于 2011-11-07T07:22:26.183 に答える