JQuery: dynamic height() with window resize()

Question

I'm having an issue identical to this poster: Jquery problem with height() and resize()

But the solution doesn't fix my issue. I have three stacked divs, and I want to use JQuery to make the middle one adjust in height to 100% of the window height, minus the height (23px * 2) of the other top & bottom divs. It works on resize, but it's off (short) by 16px when the document initially loads.

HTML

<body>
<div id="bg1" class="bg">top</div>
<div id="content">
    help me. seriously.
</div>
<div id="bg2" class="bg">bottom</div>
</body>

CSS

html,
body {
    width:100%;
    height:100%;
}

.bg {
width:315px;
height:23px;
margin:0 auto;
text-indent:-9000px;
}

#bg1 {background:url(../images/bg1.png) 0 50% no-repeat;}
#bg2 {background:url(../images/bg2.png) 0 50% no-repeat;}

#content {
width:450px; 
margin:0 auto;
text-align: center;
}

JQuery

$(document).ready(function(){
    resizeContent();

    $(window).resize(function() {
        resizeContent();
    });
});

function resizeContent() {
    $height = $(window).height() - 46;
    $('body div#content').height($height);
}

I you looking for something like this? Or should the footer move with the page? cssplay.co.uk/layouts/basics2.html A fiddle would be nice! — mrtsherman
– mrtsherman, Commented Nov 15, 2011 at 3:06
I could do something like that, but I'm stuck with the HTML that will be generated server-side. I've been asked to solve this sort of issue with JQuery. — Gregir
– Gregir, Commented Nov 15, 2011 at 3:18
See "Using Text Indent to Hide Text": reference.sitepoint.com/css/text-indent — Gregir
– Gregir, Commented Nov 15, 2011 at 3:26

mrtsherman · Accepted Answer · 2011-11-15 03:19:05Z

58

I feel like there should be a no javascript solution, but how is this?

http://jsfiddle.net/NfmX3/2/

$(window).resize(function() {
    $('#content').height($(window).height() - 46);
});

$(window).trigger('resize');

answered Nov 15, 2011 at 3:19

mrtsherman

40k23 gold badges90 silver badges111 bronze badges

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

2 Comments

mrtsherman Over a year ago

Actually, you can do it in a single line. Even shorter!

Marc Over a year ago

I think you'll find the following is better/more dynamic: $('#dataview').height($(window).height() - $('#dataview').offset().top - 10);

saluce · Accepted Answer · 2014-12-18 17:34:21Z

7

Okay, how about a CSS answer! We use display: table. Then each of the divs are rows, and finally we apply height of 100% to middle 'row' and voilà.

http://jsfiddle.net/NfmX3/3/

body { display: table; }
div { display: table-row; }
#content {
    width:450px; 
    margin:0 auto;
    text-align: center;
    background-color: blue;
    color: white;
    height: 100%;
}

edited Dec 18, 2014 at 17:34

saluce

13.4k3 gold badges52 silver badges68 bronze badges

answered Nov 15, 2011 at 3:28

mrtsherman

40k23 gold badges90 silver badges111 bronze badges

3 Comments

Santiago Baigorria Over a year ago

Man! I knew there was a CSS only solution! You inspired me. Guys, prefer this non-JS solution before any JS one. It's not as clean and you might need to use some extra mark-up, but still worth it.

barell Over a year ago

Why do people think CSS is always better than JS?

Ryan Williams Over a year ago

@barell It isn't always better, but where it concerns presentation it's generally preferable to use styling alone, instead of implementing behaviour/logic as well. An additional benefit is that CSS is resilient by design, whereas JavaScript is brittle by design.

ZKA · Accepted Answer · 2016-11-21 20:39:25Z

4

The cleanest solution - also purely CSS - would be using calc and vh.

The middle div's heigh will be calculated thusly:

#middle-div { 
height: calc(100vh - 46px); 
}

That is, 100% of the viewport height minus the 2*23px. This will ensure that the page loads properly and is dynamic(demo here).

Also remember to use box-sizing, so the paddings and borders don't make the divs outfill the viewport.

answered Nov 21, 2016 at 20:39

ZKA

5153 silver badges13 bronze badges

1 Comment

ZKA Over a year ago

Virtually all current browsers support calc (here: caniuse.com/#feat=calc) And same for vh (here: caniuse.com/#feat=viewport-units)

SuSanda · Accepted Answer · 2011-11-15 03:11:45Z

0

To see the window height while (or after) it is resized, try it:

$(window).resize(function() {
$('body').prepend('<div>' + $(window).height() - 46 + '</div>');
});

answered Nov 15, 2011 at 3:11

SuSanda

4522 gold badges4 silver badges13 bronze badges

Collectives™ on Stack Overflow

JQuery: dynamic height() with window resize()

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related