3

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.

Improve this question
3
  • 1
    You can use #footer { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px } 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 ?) 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. Commented May 15, 2013 at 13:50

7 Answers 7

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 compute 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!

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

Thanks for this answer, in this case it'll be $(window).height() -40 -40; // header and footer
Would you be able to provide a JSFiddle example? I can't get my solution to work...
Sure. You : shouldn't have problems with it Give a minute and you will get it. A simple example of course...
@MisterBrownZA, You got the fiddle
2

Just give height and width of your div in %.

Check if it works for you.

Improve this answer

1 Comment

at 400px, it'll be height: 400-40=360px at 600px it'll be height: 600-40=560px opposed to let's say, 94% (with footer being 40px) @400*0.94=376, and 40px @600*0.94=564 and 40px Please keep in mind that I don't want to use sticky footer as it runs over my maincontent div (margin-top: -40px;)
1

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.

Improve this answer

Comments

0

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.

Improve this answer

1 Comment

Would you be able to provide an example ? I think I get what you're saying, but I have no idea on how to implement it. I was thinking that in my function, I should determine the size of the window, then deduct the header and footer (both 40px) to get the maincontent height value. Will try that shortly.
0

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.

Improve this answer

Comments

0

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/

Improve this answer

1 Comment

not really applying media queries to the site... I know, I should, but I don't want to. I want the mainContent div to resize, with a non-overflowing static height footer.
0

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.net/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.net/nvNRY/2/

Improve this answer

6 Comments

Thanks for this, I'm trying it now. The maincontent will have scroll-bars itself, and that's why I don't want to use sticky footer.
Happy to help - let me know if you have any issues.
I have tried this solution, but all it does is kick my header up by 40px, and I assume this is because header is inside mainContent opposed to footer which is outside. I will see what happens if I remove header from mainContent
No need, you can set the top position of #header to -40px, and the top position of #mainContent to 40px instead. If you move #header outside, then it should be styled like #footer but with top:0 instead of bottom:0. Good luck!
I've got another problem. mainContent has a child element which has huge dimensions (something like 1400x1250) and I was using overflow:auto; to create scrollbars. However, with position:absolute; the overflow is broken. Any ideas ?
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.