html - 从 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%       |
|_________|___________|

这是 fiddle 。 http://jsfiddle.net/Ym5w8/37/

YouTube 视频应该从播放器的底部到顶部开始覆盖，而不是从上到下。

Answer 1

设置 bottom: 0 应该有助于:

.the-click { bottom: 0; }

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