How would I set the height of this to 100%?

HTML & CSS
1

It’s set to 100%, but it’s not showing 100%.

How do I set the height to 100%?

code: https://jsfiddle.net/jgLfmo1e/4/


.container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.door-left,
.door-right {
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0%;
  transition: all ease 8s;
  -moz-transition: all ease 8s;
  -webkit-transition: all ease 8s;
  -o-transition: all ease 8s;
  -ms-transition: all ease 8s;
}

.door-left {
  left: 0%;
  background-color: rgb(91, 96, 106);
}

.door-right {
  left: 50%;
  background-color: rgb(229, 211, 211);
}

.container:hover .door-left {
  left: -50%;
}

.container:hover .door-right {
  left: 100%;
}

<div class="container">
  <div class="sliding-door">
    <div class="door-left">Hover over me</div>
    <div class="door-right"></div>

    <p>Hello World</p>

  </div>
</div>
2

For percentage height to work the parent must either have a fixed height or there must be an unbroken chain of height:100% all the way back to root (html and body).

You can instead use the vh unit on the .container which will give a full viewport height without the need for this unbroken chain of parents etc.

height:100vh;

You would need to ensure the body margins are removed or the 100vh will be taller than the viewport.

2 Likes
3

Like this:

1 Like
4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.