<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何占满一屏幕余下的部分</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
<style>
@import "m_reset.css";
.fl {
float: left;
}
.fr {
float: right;
}
.m {
margin: 0 auto;
}
.container2,
html,
body {
width: 100%;
height: 100%;
}
.container2 {
width: 100%;
height: 100%;
display: -webkit-box;
-webkit-box-orient: vertical;
}
#video {
width: 100%;
height: auto;
background: #ff0000;
}
.section2 {
-webkit-box-flex: 1;
}
.section2 #video_bottom {
width: 96%;
height: auto;
margin-left: 2%;
}
.section2 .video_title {
width: 100%;
height: 40px;
-webkit-box-flex: 1;
line-height: 40px;
}
.section2 .video_title #red_text {
font-size: 14px;
font-weight: 400;
}
.section2 .video_parameter {
width: 100%;
height: auto;
border-top: 1px solid #ff0000;
padding-top: 5px;
padding-bottom: 5px;
}
.section2 .video_desc {
width: 100%;
height: auto;
border-top: 1px solid #ff0000;
padding-top: 5px;
}
/*背景图*/
#mountain_view{
background: url("背景图地址");
background-position: center center;
background-size: cover;
height: 100%;
}
</style>
</head>
<body>
<div class="container2">
<!--视频区start-->
<video id="video" controls="controls" poster="视频封面图地址">
您的浏览器不支持 video 标签。
<!--source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式。-->
<source src="视频地址" type="video/mp4">
</video>
<!--视频区end-->
<!--第二部分占满了剩余的区域开始-->
<div class="section2" id="mountain_view">
<div id="video_bottom">
<!--视频标题start-->
<div class="video_title">
<span id="red_text">视频名称</span>
</div>
<!--视频标题end-->
<!--视频参数区start-->
<div class="video_parameter">
<p>视频参数</p>
<p>拍摄间隔：5分钟</p>
<p>播放速度：10帧/秒</p>
<p>拍摄模式：夜晚</p>
</div>
<!--视频参数区end-->
<!--视频描述区start-->
<div class="video_desc">
视频内容
</div>
<!--视频描述区end-->
</div>
</div>
<!--第二部分占满了剩余的区域结束-->
</div>
</body>
</html>
/*重置css文件 m_reset.css*/
@charset "utf-8";
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0 }
body, button, input, select, textarea {font:12px/1.5 "5FAE8F6F96C59ED1", arial ; *line-height:1.5}
h1, h2, h3, h4, h5, h6 {font-size:100%; font-weight: normal;}
address, cite, dfn, em, var {font-style:normal;}
code, kbd, pre, samp {font-family:courier new, courier, monospace;}
ul, ol {list-style:none;}
fieldset, img {border:0}
table {border-collapse:collapse;border-spacing:0;}
input, button, textarea, select, optgroup, option {font-family: inherit;font-size: inherit;font-style: inherit;font-weight: inherit;font-size:100%;}
div:after, ul:after, dl:after,.clearfix:after { content:""; display:block; clear:both; height:0; visibility:hidden;}
/****/
abbr, article, aside, audio, canvas, datalist, details, figure, footer, header, hgroup, menu, nav, output, progress, section, video {display:block;margin:0;padding:0}
i,u,b,em,span,small{ font-weight:normal; font-style:normal;}
html,body {height: 100%}
/****/
html {font-size: 62.5%;}
body {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-select: none;
user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
}
a{text-decoration: none;}
h2{ margin:0; padding: 0;}