2012-12-09 24 views
5

htmlページに2つの列があり、1つは右に浮動し、もう1つは左に浮動します。 両方のコンテナの高さを100%に設定し、両方のコンテナの幅を50%に設定しました。私は2つのコンテナをエントレウィンドウに合わせたい。ユーザーがウィンドウのサイズを水平に変更すると、コンテンツのサイズを変更する必要はありません。どうすればこれを達成できますか?divコンテナのサイズ変更を停止します

ありがとう

+0

パーセンテージ幅を使用すると、コンテンツは画面を満たすようにサイズが変更されます。サイズ変更を行わない場合は、パーセンテージ幅を使用しないでください。代わりに、Javascriptを使用して、ページが最初に読み込まれるときに画面サイズを計算し、ページのサイズ変更が発生した後でもCSSでこれらの値を保持することを検討してください。 –

+0

ブラウザーが大きくなるとコンテンツが中央に表示され、ブラウザーが小さくなるとスクロールしますか? –

+0

あなたの質問は矛盾しています。コンテンツをウィンドウ全体に合わせたいが、ウィンドウのサイズ変更でサイズを変更したくないのですか? –

答えて

15

これを実現する方法はたくさんあります。まず第一に、最も簡単なのは、cssの値をmin-widthにすることです。あなたが望むのであれば、それはあなただけしなければならない(例えば)960ピクセル幅で停止するのではなく、サイズを変更するには:あなたが最良の結果を与えるだろう

myCoolDiv{ 
     width: 100%; 
     height: 50%; 
     min-width: 960px; 
    } 

を。

$(document).ready(function() { 
     //Call a variable to know the width of the window 
     var screenWidth = $(window).width(); 
     $('myCoolDiv').css('width', screenWidth + 'px'); 
    }); 

はそれが助けを願って:あなたがすべてでサイズを変更するコンテンツたくない、とセレクタは、初期画面の100%に等しい幅を持っている場合はそうでなければ、私はjQueryのをそのように使用します!私の答えが十分明確でないか、あるいはあなたがその一部を理解していない場合は教えてください!

乾杯!

+0

あなたは言った、多くの方法があります、私たちに教えてください、これを達成するための他の方法は何ですか? –

+0

@rajeevpani .. min-widthまたはmin-heightは本当にここに行く方法です、他の方法は問題に応じて使用できますしかし、コンテナのサイズを変更したいが、リサイズに制限がある場合は、最小幅または最大幅を含めるようにしてください。当時私が気にしていたことは分かりませんが、おそらくCSSのメディアクエリなどについて考えていたのですが、今度は問題をもう一度読んで答えが最善の方法だと言います。 –

関連する問題