javascript - ウィンドウ サイズに基づいて div のサイズを動的に変更する

Question

さまざまな解像度に合わせて Web サイトを最適化しようとしています。Web サイトの中央に、現在固定サイズの DIV があります。ブラウザウィンドウのサイズに応じてサイズ（およびコンテンツ）を変更しようとしています。それ、どうやったら出来るの？コードをご覧になりたい場合は、これが私のウェブサイトです: http://www.briefeditions.com

Answer 1

ページのサイズを変更すると、ページの読み込み時に div のサイズが変更されます。

$(window).on('load resize', function(){
    $('#div').width($(this).width());
});

Answer 2

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
$(document).ready(function(){
       var windowHeight = $(window).height();
       $('#divID').css('min-height',windowHeight+'px');
});

アップデート

ブラウザのサイズ変更に基づいてサイトのサイズを変更する場合は、 pxの代わりに%を使用します

CSS:

html {height:100%; overflow:hidden}
body {height: 100%;}

Answer 3

問題の提供されたリンクからコードを確認しました。

#contentスタイルで幅を80％に変更します。そして、.wrapperで幅を100％に変更します。

幅は主に920pxを使用しているため、ウィンドウのサイズを変更するたびに、コントロールのサイズは変更されません。920pxの代わりに同等の％を使用します。

Answer 4

クライアント（ユーザー）マシンの画面の幅と高さが必要だと思います。

ページのオンロード時に画面の幅と高さを取得し、jquery/javascript を使用してこれらの値を div に設定します

var userscreen_width,userscreen_height;
userscreen_width = screen.width;
userscreen_height = screen.height;

詳細については、これを確認してください

Answer 5

あなたの例では iframe も固定サイズであることに注意してください。また、親の幅に合わせてサイズを変更する必要があります。あなたの例では、これはうまくいきます：

$(window).on('load resize', function(){
    $('#content, #content > iframe').width($(this).width());
});

すべてのマージンと、上、左、position:absolute などの絶対配置を要素スタイルから削除する必要があることに注意してください。

Answer 6

あなたはこのようにすることができます

var width = $(window).width(); 
$("#divId").width(width);