Ensure div container stays at full height on vertical resize

Question

This is my container:

.test {
  height: 100vh;
}

update: This actually works without problem in firefox.

Which stretches to the full height of the webpage whenever the page is loaded, but when I resize the page vertically, it seems the viewport is not updated. In this first image, the div is the full height of the viewport:

enter image description here

However, when I resize the browser window vertically, the .test div is not updated - see image below.

enter image description here

To see for yourself, please check out the codepen here: http://codepen.io/anon/pen/CLbqy

Should I resize the window horizontally however, the height resets to the correct viewport height.

You're right, it seems like this is not a problem in Firefox at least. — nicohvi, Jan 24 '14 at 20:03
I've researched a little bit into this now, so thank you =) `vh` and `vm` are actually new to me, although I see it applied much, much more with text rather than `
` structures — MackieeE, Jan 24 '14 at 20:09

score 1 · Accepted Answer · answered Jan 24 '14 at 20:30

1

one possible suggestion is that you should use % instead vw or vh. Since we may not be able to give font-size in %, instead of px or em, we can use vw or similar kind of stuff.

And now if fonts given in vm they will not load the new change of window height and width if re-sized. So here is a small solution which I found in some random article.

causeRepaintsOn = $("#yourTagIdWithFontInVM");

$(window).resize(function() {
  causeRepaintsOn.css("z-index", 1);
});

This is the link where I found the above solution. Link

answered Jan 24 '14 at 20:30

Green Wizard

3,507
4
18
29

I tried using 100% as well as the solution from the article, but I'm still encountering the same problem. – nicohvi Jan 24 '14 at 20:43
if you are using height see this http://stackoverflow.com/questions/8262852/css-height-in-percent-not-working – Green Wizard Jan 24 '14 at 20:49
This worked! Setting body and html height to 100% did the trick. – nicohvi Jan 24 '14 at 20:53

score 0 · Answer 2 · answered Jan 24 '14 at 20:44

0

This might be an issue with scrolling in the CodePen iframe. It worked better for me when I prevented the page from overflowing:

html, body  {
  margin:0;
  padding:0
}

answered Jan 24 '14 at 20:44

TimHayes

3,684
21
26

I've already tried that I'm afraid, and I'm still running into the same problem with my application (which doesn't use iframes). – nicohvi Jan 24 '14 at 20:46

Ensure div container stays at full height on vertical resize

2 Answers2