我想要一个带有视频的页眉和页脚，在保持宽高比的同时填充中间内容区域。此外，我想要一个最小页面大小。 Here是我到目前为止所拥有的。我目前的问题是，当我达到最小页面大小时，页眉和页脚会在视频上移动。任何帮助将不胜感激。
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="header">
<h2>
Header
</h2>
</div>
<div class="content">
<video class="video" controls>
<source src="http://media.w3.org/2010/05/bunny/movie.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div class="footer">
<h2>
Footer
</h2>
</div>
</body>
</html>
CSS
.body {
min-width: 640px;
min-height: 480px;
}
.header {
position: fixed;
z-index: 100;
top: 0;
left: 0;
margin: 0;
width: 100%;
min-width: 640px;
height: 50px;
background-color: #dedede;
}
.content{
position: fixed;
top: 50px; /*header height*/
bottom: 70px; /*footer height*/
left: 0;
right: 0;
overflow: hidden;
text-align: center;
background-color: lightblue;
min-width: 640px;
min-height: 360px; /*480 - header & footer*/
}
.footer {
position: fixed;
z-index: 100;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
min-width: 640px;
height: 70px;
background-color: #dedede;
text-align: center;
}
.video{
height: 100% !important;
width: auto !important;
max-width: 100% !important;
}
最佳答案
调整您的页脚，使其贴在页面底部。将其调整为 position:relative 并设置 a 然后创建一个名为 push 的 div 并将其设置为 70px 的高度(与页脚相同) 将 div id ="push"放在内容和页脚之间。
然后，在您的内容上设置 margin-bottom 为 70px。
完成!
更新代码:
.body {
min-width: 640px;
min-height: 480px;
}
.header {
position: relative;
z-index: 100;
top: 0;
left: 0;
margin: 0;
width: 100%;
min-width: 640px;
height: 50px;
background-color: #dedede;
}
.content {
position: relative;
left: 0;
right: 0;
overflow: hidden;
text-align: center;
background-color: lightblue;
margin-bottom: -70px;
min-width: 640px;
min-height: 360px;
/*480 - header & footer*/
}
.push {
height: 70px;
clear: both;
}
.footer {
position: relative;
z-index: 100;
bottom: 0;
left: 0;
margin: 0;
padding: 0;
width: 100%;
min-width: 640px;
height: 70px;
background-color: #dedede;
text-align: center;
}
.video {
height: 100% !important;
width: auto !important;
max-width: 100% !important;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<div class="header">
<h2>
Header
</h2>
</div>
<div class="content">
<video class="video" controls>
<source src="http://media.w3.org/2010/05/bunny/movie.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<div class="push"></div>
<div class="footer">
<h2>
Footer
</h2>
</div>
</body>
</html>关于html - 如何使用最小页面大小添加页眉、视频和页脚？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31687225/