CODEWITHSUNDEEP
htmlcss
B.T
B.T

Reputation: 551

Fill space remaining under a video

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>

Upvotes: 1

Views: 222

Answers (1)

besciualex
besciualex

Reputation: 1892

There are two possibilities to achieve what you want:

  1. 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>

  1. 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>

Upvotes: 1

Related Questions