javascript - Dynamically resize a div using jQuery

I have a div (id="mainDiv") which I need to dynamically resize if the user changes the size of their browser window. I have written the following code to try and get this to work however this doesn't seem to be setting the height of my div:

<script src=".9.1.js"></script>
<script>
    var height = $(window).height(); 
    $("#mainDiv").height(height);
</script>
<body>
    <div id="mainDiv"></div>
</body>

I don't know much jQuery, am I making an obvious mistake?

<script src="http://code.jquery./jquery-1.9.1.js"></script>
<script>
    var height = $(window).height(); 
    $("#mainDiv").height(height);
</script>
<body>
    <div id="mainDiv"></div>
</body>

I don't know much jQuery, am I making an obvious mistake?

Share Improve this question edited Feb 24, 2014 at 15:15 iCollect.it Ltd 93.6k26 gold badges187 silver badges207 bronze badges asked Apr 8, 2013 at 20:47 CJH 1953 gold badges5 silver badges16 bronze badges

This code does not run when the browser is resized. It runs immediately and never again. – js1568 Commented Apr 8, 2013 at 20:49
1 you need to put your resize code in the resize function api.jquery./resize also make sure it is in doc ready – Huangism Commented Apr 8, 2013 at 20:49
4 You could easily use CSS for this when using percentages because the div is the full window. – Bram Vanroy Commented Apr 8, 2013 at 20:49

Add a ment |

5 Answers 5

Sorted by: Reset to default 7

There are a few things going wrong here:

Your code will execute straight away before your document has finished loading.
Your code will execute only on load of the the script, not on resize
You're not setting the height of your mainDiv - you're setting the height of another element with the id: accordianMain (but I'm guessing you know that).

You need to handle the browser resize event to wait for the browser to resize then get the dimensions of the window and apply accordingly. You'd do this by handling the window.resize event liks this:

var $win = $(window);

$win.on('resize',function(){
    $("#mainDiv").height($win.height());
});

What you probably want to do is wait for for a resize to finish to by adding a timeout so that it doesn't fire too often as well:

var timer,
    $win = $(window); 

$win.on('resize',function(){
    clearTimeout(timer);
    timer = setTimeout(function(){
        $("#mainDiv").height($win.height());
    }, 500);

});

You need to wrap it in a resize function:

$(window).on('resize',function(){
    var height = $(window).height(); 
    $("#mainDiv").height(height);
});

Although I should point out what your doing could easily be attained through CSS:

body,#mainDiv {
    height:100%;
}

This is more to point out the "it needs to be in a resize event wrapper" larger point, in case you wanted to do some logic that actually needed the event.

Yes, the mistake is use jquery hehehe

You do this with CSS

<body>
    <div id="mainDiv" style="height:100%"></div>
</body>

Use an event listener for the window resize (and you should wait for page load before accessing elements with JQuery):

$(function() {
  $(window).on('resize', function() {
    var height = $(window).height(); 
    $("#mainDiv").height(height);
  });
});

I used div content and div footer in my page, i will set this code in my js to set dynamic height for div content.

 footer = $("div[data-role='footer']");
    content = $("div[data-role='content']");
    viewHeight = $(window).height();
    contentHeight = viewHeight - footer.outerHeight();
    contentHeight -= (content.outerHeight() - content.height());
    content.height(contentHeight);

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Dynamically resize a div using jQuery - Stack Overflow

5 Answers 5

与本文相关的文章

评论列表(0)