html - 使用 flex 作为显示,并有一个视频作为孩子不尊重我的填充设置
问题描述
我想在 HTML 页面上有:
- header div - 一些高度,基于其内容
- 内容 div(在标题下方)- 取标题下方高度的其余部分
- 表(在内容 div 中) - 对其父级(内容 div)的两个维度都取 100%
- 视频项目(在表格中) -为其父级 (td) 的两个维度获取并保留100%
这是我所拥有的:
body { margin: 0; }
#main {
position: absolute;
left:0px;
top:0px;
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
background:red;
}
#header {
background:yellow;
}
#content {
background:gray;
flex:1;
}
table {
width: 100%;
height: 100%;
background: blue;
color: white;
}
video {
width: 100%;
height: 100%;
}
<html>
<body>
<div id="main">
<div id="header">
Header
</div>
<div id="content">
<table>
<tr>
<td>
<video controls>
<source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
</video>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
现在,问题出在视频标签上(如果您运行此代码段,将会出现滚动条——我不想要它们)。
如果我删除视频标签,一切都会按预期工作。但是,如果有 video 标签,它会破坏 'flex' 选项:它会放大 td,因此表格也会变大,然后内容也会变大 - 因此启用滚动条并且页面将不适合屏幕。
也许在加载媒体时调整了视频的大小,那时所有的 css 操作都完成了。
但是,即使在播放期间,有什么方法可以使视频的大小与其父级(td)的 100% 宽度和高度完全相同?
解决方案
你可以制作视频position:absolute
body {
margin: 0;
}
#main {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
display: flex;
flex-direction: column;
background: red;
}
#header {
background: yellow;
}
#content {
background: gray;
flex: 1;
min-height: 0;
}
table {
width: 100%;
height: 100%;
background: blue;
color: white;
}
td {
position: relative;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div id="main">
<div id="header">
Header
</div>
<div id="content">
<table>
<tr>
<td>
<video controls>
<source src="https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/1080/Big_Buck_Bunny_1080_10s_1MB.mp4" type="video/mp4">
</video>
</td>
</tr>
</table>
</div>
</div>
推荐阅读
- php - 使用 array_search 输出 common int
- r - 如何重命名一列的值?
- python - python电子邮件脚本循环错误想知道每次迭代
- python - 协方差矩阵返回不同的值
- html - 在零宽度元素中居中文本
- rasa - 用实体列表填充槽 | 拉萨
- python - 为什么我不能在“return”语句中使用 exec()
- visual-studio-2019 - 无法从 Visual Studio 2019 16.6.2 调试 Blazor 托管的 webassembly 3.2.0
- laravel - 验证数组 - 获取当前迭代
- sql - 使用带有多个表和连接的 Group By 进行 SQL 计数