web-dev-qa-db-ja.com

ブラウザウィンドウのサイズに基づいてdivを動的にサイズ変更

ブラウザウィンドウのサイズに基づいて、divを動的にサイズ変更する方法を理解しようとしています。私の問題を説明するjsbinを設定しました。ここでは http://jsbin.com/uxomul

私がしたいのは、画像を保持するdivのサイズを変更して、divが常にブラウザーウィンドウの高さの左側に収まるようにすることです（本体に設定されている下部の25ピクセルのマージンを除く）。

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

これに取り組むための最良の方法は何でしょうか？

javascriptjqueryhtmlcssresize
9
INT

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

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

25はサンプル数です。たとえば、マージンです（動的に取得することもできます）

また、それを関数にラップして、ページのロード時とサイズ変更時にこれを呼び出すこともできます

12
Ortiga

CSSの位置/絶対/相対をCSSの上部/下部/左/右と組み合わせて使用​​します。例：

<!doctype html>
<html>
    <head>
        <style> 
            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; }
        </style>
    </head>

    <body>

        <!-- Head -->
        <div id="head">
            <h1>Header</h1>
        </div>

        <!-- Body -->
        <div id="body">

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

            <!-- Content -->
            <div id="body-content">
                <h2>Content</h2>
                <img src="http://dl.dropbox.com/u/3618143/image1.jpg" />
                <img src="http://dl.dropbox.com/u/3618143/image2.jpg" />
                <img src="http://dl.dropbox.com/u/3618143/image3.jpg" />
            </div>

        </div>

    </body>
</html>
7
F i L

ブラウザのウィンドウのサイズ変更イベントにバインドしようとすることができます。

例えば：

window.onresize = function() {
//your code
}
7
scripto

位置を固定して、自動的にサイズ変更されるようにする必要があります。

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

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

#FitScreenHeight
{
    position:fixed
    height:100%
}
1
Tarek