Hello.
I have a CRM project in my CRM project that is normally displayed on the large monitor (full block height), but if you change the size of the width of the browser window, an empty space appears ...
How to solve?
HTML code:
<div id="promo-index"> <video id="video" width="100%" height="auto" autoplay="autoplay" loop="loop" preload="auto"> <source src="/images/ScreenCaptureProject3.mp4" type="video/webm"></source> </video> <div id="promo-bg"> <div id="promo-wrap"> <h1 class="main-title">CRM 小袠小孝袝袦袗, 袣袨孝袨袪袗携 袩袨袟袙袨袥袠孝 袙袗袦 <ul id="ticker"> <li>袙袝小孝袠 小袛袝袥袣袠</li> <li>校袩袪袗袙袥携孝鞋 袣袥袠袝袧孝袗袦袠</li> <li>袣袨袧孝袪袨袥袠袪袨袙袗孝鞋 小袨孝袪校袛袧袠袣袨袙</li> <li>小孝袗袙袠孝鞋 袟袗袛袗效袠 小袨孝袪校袛袧袠袣袗袦</li> <li>小袥袝袛袠孝鞋 袟袗 袠小袩袨袥袧袝袧袠袝袦 袟袗袛袗效</li> <li>小袨袘袠袪袗孝鞋 袣袥袠袝袧孝袨袙 小 小袗袡孝袗</li> <li>袥袨袙袠孝鞋 校啸袨袛携些袠啸 袣袥袠袝袧孝袨袙 小 小袗袡孝袗</li> <li>袚袪校袩袩袠袪袨袙袗孝鞋 袣袥袠袝袧孝袨袙</li> <li>袙袝小孝袠 袠 校袩袪袗袙袥携孝鞋 袧袝小袣袨袥鞋袣袠袦袠 袩袪袨袝袣孝袗袦袠</li> <li>袗袧袗袥袠袟袠袪袨袙袗孝鞋 袪袗袘袨孝校</li> <li>袗袧袗袥袠袟袠袪袨袙袗孝鞋 孝袪袗肖袠袣 小袗袡孝袗</li> </ul> </h1> </div> </div> </div> CSS code:
#promo-index{position: relative; width:100%; height:800px;} #promo-index > video { position: absolute; top: 0; left: 0; width: 100%;/* height: 100%; */ } #promo-bg {background: url("../images/bg-dots.png"); height: 100%; height: 100%; width: 100%; position: absolute;} #promo-wrap{width:950px; height:130px;margin:0 auto;padding-top:10%; text-align:center;} #promo-wrap span, #promo-wrap h1 {opacity:1 !important;} #promo-wrap span{display:block;} #promo-wrap .promo-tick {margin-top:40px;} #promo-wrap .promo-tick div:nth-child(1) {float: left; margin-left:0px;color:#fff; font-size:1.1em;} #promo-wrap .promo-tick div {float: left; margin-left:50px;color:#fff; font-size:1.3em;} #promo-wrap .promo-tick div .tick-item {margin-bottom:-5px;} 
