Fill space remaining under a video

Question

I've got a very simple page with two divs. One of these div display a video with a 16:9 aspect ratio and there's another div under it. I would like this second div to fit the remaining space between the bottom of the video and the bottom of the container, knowing that this container is not fix.

But right now, I don't get a way to do it.

https://jsfiddle.net/kmfvh8rg/1/

<div id="pbzone">
    <div id="pgzone">
                <video preload="auto" autoplay="true" width="100%" src="http://www.w3schools.com/html/mov_bbb.mp4" id="player"/>

    </div>

    <div id="ppzone">

    </div>
</div>

I would try to set the `pbzone` height to the actual height of the screen, and the `ppzone` div's height to 100%. A relative height only works if the parent has a fix height. That is, that would only cover the height problem. — Shikatsu Kagaminara, Dec 12 '16 at 08:50

besciualex · Answer 1 · 2016-12-12T09:34:36.123

There are two possibilities to achieve what you want:

First one is by using absolute positioning as you tried, and the div you want green to be a layer under the video (using z-index property).

The problem in your case is that your div does not have any width. Add left: 0; and right: 0; or simply width: 100%; to #ppzone{ } css. You should also had close </video> tag, and add position: relative; to container: #pgzone. Without position: relative; added to container, the div with position: absolute; referenced to body instead to the parent you actually wanted to refer.

This CSS case is exemplified below:

#pgzone{
  position: relative;
  border-style: solid;
  width: 500px;
  height: 600px;
  border-width: 1px;
}
#pgzone video{
  position: relative;
  z-index: 10;
}
#pbzone{
 height: 80%;
 position: relative;
 background-color: #0e0e0e;
}

#ppzone{
  position: absolute;
  z-index: 5;
  bottom: 0;
  top: 39.25%;
  background-color: green;
  left:0;
  right: 0;
}

<div id="pgzone">
  <video preload="auto" autoplay="true" width="100%" src="http://www.w3schools.com/html/mov_bbb.mp4" id="player"></video>
  <div id="ppzone">
    <div id="pp1"></div>
    <div id="pp2"></div>
  </div>
</div>

The second case, where you don't use absolute positioning at all, but rather display: table; css property, like bellow:

#pgzone{
  border-style: solid;
  width: 500px;
  height: 600px;
  border-width: 1px;
  display: table;
  box-sizing: border-box;
}

#pvidwrapper{
    height: 0;
    display: table-row;
}
#pvidwrapper video{
  vertical-align: bottom;
}
#ppzone{
  height: auto;
  background-color: green;
  display: table-row;
  box-sizing: border-box;
}

<div id="pgzone">
  <div id="pvidwrapper">
    <video preload="auto" autoplay="true" width="100%" src="http://www.w3schools.com/html/mov_bbb.mp4" id="player"></video>
  </div>
  <div id="ppzone">
    <div id="pp1"></div>
    <div id="pp2"></div>
  </div>
</div>

And what about the width, the div is indeed under the video now, but it doesn't fit the width of the container. And if a resize the container, the div goes on the video. — B.T, Dec 12 '16 at 08:53
Thank you for your help, but there is still a problem. The div is getting over the video, as you can see : http://prntscr.com/didehk — B.T, Dec 12 '16 at 08:58
@Ezhno There are two possibilities to achieve what you wanted: the one I added above, or another one, using display: table; like here http://stackoverflow.com/questions/7198282/how-to-make-div-occupy-remaining-height — besciualex, Dec 12 '16 at 09:02
@Ezhno also, I updated the answer to have the video on top, and absolute behind it. — besciualex, Dec 12 '16 at 09:03

Fill space remaining under a video

1 Answers1