Question

我正在尝试使用绝对位置高度为100％且与媒体对齐的图例100％制作视频，问题是适合100％高度的部分，我不寻求半查询，我想要你自然适合

这里是我尝试做的例子

#parent {display: table;}

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

http://jsfiddle.net/uvc33Lvn/

Answer 1

我认为这就是你所追求的：

<强> 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

.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;
}

我所做的主要是通过修改一些CSS重新安排了一些标记。

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

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

如何设置div与位置绝对高度100％＆amp;垂直中间？

1 个答案: