How can set div with position absolute height 100% & vertical middle?

I'm trying to make a video 100% with a legend with absolute position height 100% and aligned to the medium, the problem is that fits 100% height of the section, I seek not do half querys, I want you to naturally suits

我正在尝试用绝对位置高度为100％且与介质对齐的传奇100％制作视频，问题是适合100％高度的部分，我寻求不做半查询，我希望你自然适合

here my example of what I try to do

这里是我尝试做的例子

#parent {display: table;}

#child {
    display: table-cell;
    vertical-align: middle;
}

http://jsfiddle.net/uvc33Lvn/

1 个解决方案

#1

I think this is what you're after:

我想这就是你所追求的：

HTML

HTML

<section>
    <div id="video-wrap" class="autoplay">
        <video nocontrols="" loop="">
            <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video>
        <div class="legend-video">
            <h1>Pipoipoipo</h1>
            <p>iopipoiopop 2014</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
            <p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
        </div>
    </div>

CSS

CSS

.legend-video {
    background: rgba(0,0,0,0.4);
    color: white;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 30%;
    overflow: auto;
}
video {
    width: 100%;
    display: block;
    position: relative;    
}
#video-wrap {
    position: relative;
}

Primarily what I did was re-arranged some of your markup with a touch up on some CSS.

我做的主要是重新安排了一些标记，并在一些CSS上进行了修饰。

I moved your .legend-video inside the container element for the video. Then set .legend-video to position: absolute so it doesn't take up any space inside of #video-wrap. Now all we have to do is position and stretch out .legend-video to our liking. To make sure .legend-video is the full height of #video-wrap we set the properties top, right and bottom to 0. That tells the element to be zero pixels from the top, right or bottom edges of the parent element's edges.

我将.legend-video移动到视频的容器元素中。然后将.legend-video设置为position：absolute，这样就不会占用＃video-wrap中的任何空间。现在我们所要做的就是根据自己的喜好定位和延伸.legend-video。为了确保.legend-video是#video-wrap的全高，我们将属性top，right和bottom设置为0.这告诉元素是父元素边缘的顶部，右边或底边的零像素。

jsFiddle: http://jsfiddle.net/uvc33Lvn/7/

jsFiddle：http：//jsfiddle.net/uvc33Lvn/7/

#1