作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试制作一个 100% 的视频,其图例的绝对位置高度为 100% 并与媒体对齐,问题是适合该部分的 100% 高度,我寻求不做一半查询,我想要你自然适合
这是我尝试做的例子
#parent {display: table;}
#child {
display: table-cell;
vertical-align: middle;
}
最佳答案
我认为这就是您所追求的:
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
内的任何空间。现在我们所要做的就是根据自己的喜好定位和拉伸(stretch) .legend-video
。为了确保 .legend-video
是 #video-wrap
的完整高度,我们设置属性 top
, right
和 bottom
到 0
。这告诉该元素距父元素边缘的顶部、右侧或底部边缘为零像素。
jsFiddle:http://jsfiddle.net/uvc33Lvn/7/
关于html - 如何设置位置绝对高度为 100% 和垂直中间的 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29656901/
https://docs.scipy.org/doc/scipy/reference/generated/scipy.signal.peak_widths.html 我认为链接函数只能计算相对高度处的
我是一名优秀的程序员,十分优秀!