Установите высоту 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; } 

Fiddle: 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/