user1658080 user1658080 - 4 months ago 8x
HTML Question

DIV with 100% of Parent's Viewport

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:

#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:

Would appreciate your help. Thanks!


Here the updated JSFiddle:

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%

And define this css class:

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