javascript - How to resize div on browser re-size - Stack Overflow

admin管理员组

文章数量:1415119

Right, so instead of using sticky footer, I've decided to create a jQuery function that will change the size of my #mainContent div so that the footer can fit in nicely.

Basically what I'm trying to do is have

 #mainContent { height: 100% - 40px; }

Where

#footer { height:40px; }

I came up with

$(window).resize(function() {
    var mainContent = $('#mainContent').innerHeight() - 40;
    $('#mainContent').css("height", mainContent);
});

but every time I resize, it simply shortens #mainContent by 40px instead of re-working what #mainContent is supposed to be, then -40px;

$(window).resize(function() {
    var mainContent = $(document).height() - 80;
    $('#mainContent').css("height", mainContent);
});

I feel like I'm missing something.

Please help.

Edit: header and footer are static (i.e. 40px each), I'd like to resize mainContent without having footer flow over it (because sticky footer uses margin-top:-40px;). I still want my footer to be at the bottom of the screen. Edit2: added the second try.

Right, so instead of using sticky footer, I've decided to create a jQuery function that will change the size of my #mainContent div so that the footer can fit in nicely.

Basically what I'm trying to do is have

 #mainContent { height: 100% - 40px; }

Where

#footer { height:40px; }

I came up with

$(window).resize(function() {
    var mainContent = $('#mainContent').innerHeight() - 40;
    $('#mainContent').css("height", mainContent);
});

but every time I resize, it simply shortens #mainContent by 40px instead of re-working what #mainContent is supposed to be, then -40px;

$(window).resize(function() {
    var mainContent = $(document).height() - 80;
    $('#mainContent').css("height", mainContent);
});

I feel like I'm missing something.

Please help.

Edit: header and footer are static (i.e. 40px each), I'd like to resize mainContent without having footer flow over it (because sticky footer uses margin-top:-40px;). I still want my footer to be at the bottom of the screen. Edit2: added the second try.

• javascript
• jquery
• html
• css

Share Improve this question Follow edited May 15, 2013 at 14:22 MisterBrownZA asked May 15, 2013 at 13:32 MisterBrownZAMisterBrownZA 6566 bronze badges 3

• 1 You can use #footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px } – Catalin Commented May 15, 2013 at 13:36
• Besides your footer and main content is there any other element using height in your example? (A header or whatever ?) – Fico Commented May 15, 2013 at 13:43
• Header and footer are fixed (i.e. 40px) but maincontent will expand and contract as the window is resized. – MisterBrownZA Commented May 15, 2013 at 13:50

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 2

I the only elements using your screen height are the mainContent div and the footer, and you decided to control your footer through your javascript+jquery function in a responsive way, use window or document height in order to pute the content div height as so:

 var mainContent = $(window).height() -40;  
 var mainContent = $(document).height() -40; 

An example to show it working as you required.

I coded for you a simple markup but enough to show you that it should work for you as well.

Its up to you to take care of reseting/considering any possible vertical margins that can be collapsing or whatever in order to obtain the correct figure to apply in the function.

I applied a min-height declaration for the mainContent rule just for my example. of course you dont need that at all as well as those horrible colors I used :)

The positionFooter function does not need to be so extended. I wrote it that way for a didactic purpose

Here the code:

$( function () {
    function positionFooter() {
        var wh = $(window).height();
        var wc = wh - 80;
        $('#mch').text(wc);
        $("#mainContent").height(wc);
    }
    $(window).resize(positionFooter);
    positionFooter();   
});

Take care of identifiers , selectors, etc when you propagate this solution to your own code.

Any way, I cant imagine why you dont want to apply a full CSS solution instead of using javascript. But Ok. Its your call. Here is the fiddle. Enjoy!

Just give height and width of your div in %.

Check if it works for you.

This should do the trick DEMO

$(document).ready(function(){
    $(window).resize(function() {
        var mainContent = $(window).height() - 80;
        $('#mainContent').css("height", mainContent);
    });
    var mainContent = $(window).height() - 80;
    $('#mainContent').css("height", mainContent);

});

Let me know if this doesn't work.

It keeps shortening because you hard coded a pixel value for the size. The size will not expand/shrink because of the hard coded value.

If you want to get the full height, than you would need to remove the px value you set before reading the height.

Like RaraituL said, you can use a sticky footer. Then, if you really want to do the 100% height stuff, you can do something like:

#mainContent { height: 100%; box-sizing:border-box; padding:0 0 40px;}

Add in all the vendor prefixes and you should have the correct sizing. See here for more about box-sizing.

You can use media query to load a different css file for a specific size of browser.

@media (min-device-width: 640px) { ... }

It's like this http://mediaqueri.es/

I'm not 100% sure this is what you're looking for - it sounds like you want #mainContent to fill up the whole window except the bottom 40px. If so, this ought to work for you:

Html:

<div id="mainContent">This is the main content</div>
<div id="footer">This is the footer</div>

CSS:

#mainContent {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:40px;
    background:#F0F0F0;
    overflow:auto;
}
#footer {
    position:absolute;
    bottom:0;
    left:0;
    right:0;
    height:40px;
    background:#FCC;
}

Working example: http://jsfiddle/nvNRY/1/

Edit: If you don't want #mainContent to act like a frame (i.e. with it's own scrollbar) then simply add 40px padding to the bottom of the body tag. Don't position #mainContent absolutely and it will butt up against the padding, whereas #footer will overlap the padding.

Edit 2: Example with header and showing overflow:scroll is action: http://jsfiddle/nvNRY/2/

本文标签： javascriptHow to resize div on browser resizeStack Overflow