DIV with 100% of Parent's Viewport

Question

I can't figure out how to set the hight of a div to 100% of it's parents viewport.

The goal is to have a scrollable div with an other div ("welcome-screen") + text inside. "Welcome-screen" should fill the complete viewport, so that you see the text below only after you scrolled. Inside "welcome-screen" should be a centered logo.

I tried so many things but couldn't find a solution which works given the additional divs Joomla generates.

I generated a JSFiddle to illustrate the Problem: https://jsfiddle.net/z8xy6ttL/

#outer {
  height: 300px;
  width: 400px;
  overflow: auto;
}

.welcome-screen {
  background-color: darkred;
  height: 100%;
  position: relative;
}

.article-wrap {
  height: 100%;
  min-height: 100%;
  background-color: aquamarine;
  overflow: auto;
}

article {
  padding: 30px;
  text-align: left;
  display: table-cell;
}

That's what I try to archive but dynamically: https://jsfiddle.net/hausmaster/z8xy6ttL/3/

Would appreciate your help. Thanks!

Possible duplicate of [Make div 100% height of browser window](http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window) — rnevius, May 25 '16 at 23:26
Since `#outer` is 300px, can you not just make the height of `.welcome-screen` 300px? Or are you looking for a more dynamic solution? — Cave Johnson, May 25 '16 at 23:47

score 3 · Accepted Answer · answered May 26 '16 at 00:12

Here the updated JSFiddle: https://jsfiddle.net/z8xy6ttL/5/

I just moved the .welcome-screen div into .article-wrap and set its position to absolute.

Also I added this css to the article tag:

position: relative;
top: 100%;

If you want to set the vertical align of welcome-screen's content to middle, you must set its display property to table and update its html to:

<div class="welcome-screen">
  <div class="display-table-cell">
    Welcome Screen 100%
  </div>      
</div>

And define this css class:

.display-table-cell {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

Thanks a lot! @RachelGallen - his one dynamically adapts to the parent's hight :-) — user1658080, May 26 '16 at 07:43

Rachel Gallen · Answer 2 · 2016-05-26T00:21:23.117

1

change the 100% to 100vh in the welcome class and it'll work

https://jsfiddle.net/RachGal/z8xy6ttL/1/

(you don't actually need the !important)

a bit of padding might look better thought so maybe size it to a lower % - in the fiddle, 60vh works well. (but this will have to be adjusted if you want your div to be bigger) (60% of 300 is 180 but account for 30px top and bottom padding - 240)

https://jsfiddle.net/RachGal/4duqzsh2/

edited May 26 '16 at 00:21

answered May 25 '16 at 23:39

Rachel Gallen

27,943
21
72
81

100vh takes 100% of the **body** viewport - but I want 100% of the **parent's** viewport. Like if I would set welcome-screen to 230px height - but that it works dynamically.. – user1658080 May 25 '16 at 23:41
@user1658080 did you even look at the fiddle? it works. the parent is the scrollable div, right? well that's what it becomes the height of.. otherwise i don't understand what your intention is.. how do you want it to look? – Rachel Gallen May 25 '16 at 23:44
I updated the question with an example. Thanks in advance! – user1658080 May 25 '16 at 23:48
@user1658080 i only saw your edit after i posted the last comment. I tried to use the calc(100vh-60px) but it seems that you cant use vh in the calc function. You see, if you size it to 100%, it only sizes to the height of whatevers in the div. that's why its so small at the moment. When you add an image, it'll be bigger! – Rachel Gallen May 26 '16 at 00:05
I know that it grows as soon as you add content but that's not what I am after. The aim is to have a div above the text with the same size of the parent - so when you scoll you start seeing the text below the div. – user1658080 May 26 '16 at 00:14
@user1658080 I fully understand the aim. I'm not that stupid! – Rachel Gallen May 26 '16 at 00:23
I thought that your solution should work too but after I played around with your fiddle, it looks like the the vh units are actually fractions of jsfiddle's iframe used to render the html. You can see this for yourself if you inspect the welcome-screen element and look at it's "computed" height. If you drag and resize the boundaries of the iframe, the computed height changes. – Cave Johnson May 26 '16 at 18:27
1

@Andrew I did say that in my answer! – Rachel Gallen May 26 '16 at 18:36
I did not see that in your answer. But in any case, that is not what the OP was asking for. He wanted the welcome-screen to be 100% of the height of the visible portion of the `#outer` div. The height of jsfiddle's html iframe is not related to that. – Cave Johnson May 26 '16 at 18:39

score 0 · Answer 3 · answered May 25 '16 at 23:28

0

Not sure if I fully understand the question, but you are setting #outer to 300x400. All divs inside this will take 100% of that

answered May 25 '16 at 23:28

mcky

823
2
7
20

No, in my example it doesn't. It should look like if I would set the hight of welcome-screen to 230px. That's the "look" I want to archive for any given size of #outer. – user1658080 May 25 '16 at 23:43
It will take 100% of the width but not the height. The OP wants it to take 100% of the height of the viewport. – Cave Johnson May 25 '16 at 23:46

score -1 · Answer 4 · edited May 26 '16 at 10:44

-1

In your html code you have got the following:

 <div class="article">
...
<div class="welcome">...</div>
...
</div>

Your class .article needs a 30px padding, then .welcome class won't fill your page.

edited May 26 '16 at 10:44

GMchris

5,439
4
22
40

answered May 25 '16 at 23:39

enrique

1
2

1

Hi @enrique, welcome to SO. Your answer is unclear and rather incomplete. Please check out [How do I write a good answer?](http://stackoverflow.com/help/how-to-answer) for help; you can then [edit your answer](http://stackoverflow.com/posts/37449325/edit) to improve it. – Tim Malone May 25 '16 at 23:45

DIV with 100% of Parent's Viewport

4 Answers4