从DIV底部设置DIV的高度

Question

我正试图the-box从它的底部设置元素的高度.

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>

发生了什么事

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

我需要做的是

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

这是小提琴.http://jsfiddle.net/Ym5w8/37/

YouTube视频应该从播放器的底部到顶部开始,而不是从上到下.

Answer 1

设置bottom: 0应该有帮助:

.the-click { bottom: 0; }

小提琴:http://jsfiddle.net/Ym5w8/40/