CODEWITHSUNDEEP
htmlcss
Naveen Gamage
Naveen Gamage

Reputation: 1884

Set height of a DIV from bottom of the DIV

I'm trying to set height of the-box element from the bottom of it.

CSS

.the-box { position: absolute; left: 0px; right: 0px; width: 100%; height: 50%; z-index: 999; background-color: white; opacity: 0.5; }

.container { position: relative; }

HTML

<div align="center" class="container">
    <div class="the-box"> </div>
    <iframe wmode="Opaque" class="video-iframe" width="100%" height="315" src="//www.youtube.com/embed/ZauRZNs8BMg" frameborder="0" allowfullscreen=""> </iframe>
</div>

What's happening is

_____________________
|         |          |
|         | 50%      |
|         |          |
|        \/          |                    
|                    |
|____________________|

What I need to happen is

______________________
|                     |
|                     |
|         /\          |
|         |           |                    
|         | 50%       |
|_________|___________|

Here is the fiddle for this. http://jsfiddle.net/Ym5w8/37/

The YouTube video should be covered starting from the bottom to top of the player, not from top to bottom.

Upvotes: 1

Views: 58

Answers (2)

akash
akash

Reputation: 2157

use bottom:0;

try this

.the-box { position: absolute; left: 0px; bottom:0;right: 0px; width: 100%; height: 50%; z-index: 999; background-color: white; opacity: 0.5; }

http://jsfiddle.net/Ym5w8/41/

Upvotes: 2

emmanuel
emmanuel

Reputation: 9615

Setting bottom: 0 should help:

.the-click { bottom: 0; }

Fiddle: http://jsfiddle.net/Ym5w8/40/

Upvotes: 5

Related Questions