ブラウザウィンドウのサイズに応じてdivのサイズを動的に変更する

ブラウザのウィンドウサイズに基づいて、divのサイズを動的に変更する方法を考えています。私の問題を説明するjsbinを用意しました： http://jsbin.com/uxomul

私がしたいことは、画像を保持するdivのサイズを変更し、divが常にブラウザウィンドウの高さの左を埋めるようにすることです（下部の25pxの余白を除いて、これはbodyに設定されています）。

以下は、私が実現したいことをより明確に示すデモです: http://emilolsson.com/shop/demo/layers

何か良い方法があれば教えてください。

プログラミング
javascript html jquery css resize
3日 1月 2012 в 7:21
1ビュー
ソリューション

こんなことができる：

var width = $(window).width() - 25; 
$("#mydiv").width(width);

25 はマージンなどのサンプル数値です（動的に取得することもできます）。

これを関数にラップして、ページロード時とリサイズ時の両方で呼び出すこともできます。

解説 (3)

CSS position:absolute/relativeとCSS top/bottom/left/rightを組み合わせて使用します。例





            html, body    { margin:0; padding:0; width:100%; height:100%; }

            #head         { width:100%; height:100px; background:black; color:white; }
            #head > h1    { margin:0; }

            #body         { position:absolute; width:100%; top:100px; bottom:25px; background:red; }
            #body > div   { position:absolute !important; }
            #body-sidebar { width:200px; top:0; bottom:0; background:black; color:white; }
            #body-content { left:200px; right:0; top:0; bottom:0; background:white; overflow:scroll; }
            #body-content > img { margin:25px; width:500px; vertical-align:middle; }






        <div id="head">
            <h1>Header</h1>
        </div>


        <div id="body">


            <div id="body-sidebar">
                <h2>Sidebar</h2>
            </div>


            <div id="body-content">
                <h2>Content</h2>



            </div>

        </div>
解説 (2)

ブラウザのウィンドウのresizeイベントにバインドすることができます。

例えば

window.onresize = function() {
//your code
}
解説 (0)

位置は自動的にサイズ変更されるように修正する必要があります。

実行時に画面の高さが変化した場合。

これをCSSシートに入れます。

#FitScreenHeight
{
    position:fixed
    height:100%
}
解説 (1)