首页 > 代码库 > 如何占满一屏幕余下的部分
如何占满一屏幕余下的部分
<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>我的弹性盒布局</title> <meta name="viewport" content="width=device-width,initial-scale=1.0"/> <link rel="stylesheet" href="css/style.css"/><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="./合欢山风光.jpg"> 您的浏览器不支持 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>
另附上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 "\5FAE\8F6F\96C5\9ED1", 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;}ul{word-spacing: -4px;}
如何占满一屏幕余下的部分
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。