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/

Answer 2

使用bottom:0;

试试这个

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

从DIV底部设置DIV的高度

2 个答案: