发表新帖
发表新帖

Dynamically resize div based on size of browser window

后端 未结
关注
4 606
伪装坚强ぢ
伪装坚强ぢ 2020-12-09 00:07

I\'m trying to figure out how to have a div dynamically resize, based on the size of the browser window. I\'ve set up a jsbin that illustrates my problem, here: http://jsbin

相关标签:
4条回答
  • 忘了有多久
    2020-12-09 00:43

    You can do something like this:

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

    25 is just a sample number, for example your margin (you can get this dynamically too)

    You may also want to wrap it into a function and call this on both page load and on resize

    0 讨论(0)
  • 轻奢々
    2020-12-09 00:50

    You can try to bind to the resize event of the browser's window.

    For example:

    window.onresize = function() {
//your code
}
    0 讨论(0)
  • 太阳男子
    2020-12-09 01:00

    Use CSS position:absolute/relative in combination with CSS top/bottom/left/right. Example:

    <!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>
    0 讨论(0)
  • 太阳男子
    2020-12-09 01:05

    Position must be fixed so it will be resized automatically.

    If screen height changed in run time

    Put this in CSS sheet:

    #FitScreenHeight
{
    position:fixed
    height:100%
}
    0 讨论(0)
 看不清?
提交回复
热议问题