如何设置 div 位置绝对高度 100% & 垂直中间？

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 内的任何 space。现在我们所要做的就是根据自己的喜好定位和伸展 .legend-video。为了确保 .legend-video 是 #video-wrap 的完整高度，我们将属性 top、right 和 bottom 设置为 0。这告诉该元素距父元素边缘的顶部、右侧或底部边缘为零像素。

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

如何设置 div 位置绝对高度 100% & 垂直中间？

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

html

css

responsive-design