DIV不在横向模式下调整为视口

时间:2018-09-27 15:23:26

标签: html css

我有一个拉伸响应的DIV,具有4:3填充全背景视频,在屏幕的水平和垂直中心。 我在这个DIV中还有其他Divs。我需要将它们放置在绝对位置,以将它们保持在不同分辨率的比例位置(%top和%left)中。 在纵向模式下,它工作正常,但在横向模式下,DIV垂直大于带有滚动条的屏幕的垂直视口,如您在(https://i.stack.imgur.com/cA09h.jpg中看到的那样。 我不知道我在做什么错。我会提供任何帮助。

预先感谢

html, body { margin: 0; padding: 0; width: 100%; height: 100%; display: table } 
#borde { display: table-cell; text-align: center; vertical-align: middle;
border: 5px solid green; background-color: red; overflow: hidden;}
#container { position: relative;  text-align: center; vertical-align: middle; border: 5px solid blue; background-color: green; margin: 0 auto; width: 100vw; height: 75vw; }

.video2 {
object-fit: fill; width: 100%; height:100%; margin: 0 auto;
}

    .galpla {
        background-image: url('http://www.maswebdesign.com.br/galpla.png');
        -webkit-background-size: contain; -moz-background-size: contain;
         -o-background-size: contain; background-size: contain;
        background-position: center center;
        width: auto; height: auto;
        background-repeat: no-repeat;
    }

@media (orientation: landscape) {
    #container {
  width: 133vh;
  Height: 100vh;
  }
}
#menu2 li {
    float: left; display: inline; cursor: pointer;
	color: #FFFFFF;	font-weight: bold; white-space: nowrap;
}
#menu2 li:hover {
	color: #009BFF;
}
#menu2 li a {
    display: block; color: white; text-align: center;
    padding: 7px 7px; text-decoration: none;
	margin: 0px 5px 0px 5px;
}
<div id="borde">
<div id="container"> 
<video class="video2" poster="home_por.jpg" id="foo" autoplay muted loop preload="auto">
 <source type="video/mp4" src="http://www.maswebdesign.com.br/video43.mp4">
 </video>
  <div id="menu2" style="position:absolute; top:1%; left:0%; width: 100%; height: 5%; font-size:1vw; z-index: 1; text-align: center; ">
 
 				<ul style="list-style-type: none; margin: 0px auto; border-color: #747A99 #224073 #3E547C #213E6E; border-style: solid; border-radius: 10px; box-shadow: inset 0.2em 0.1em 0.5em 0.4em #4D6086; list-style:none; display: inline-block; padding: 0">
					<li><a href="main.html">Main</a></li>
					<li><a href="page1.html">Page1</a></li>
					<li><a href="page2.html">Page2</a></li>
					<li><a href="page3.html">Page3</a></li>
					<li><a href="page4.html">Page4</a></li>
					<li><a href="page5.html">Page5</a></li>
					<li><a href="page6.html">Page6</a></li>
					<li><a href="page7.html">Page7</a></li>
					<li><a href="page8.html">Page8</a></li>
				</ul>
 </div> 
   				<div class='galpla' style="position:absolute; top:1%; left:45%; width: 40%; height: 40%; font-size:1vw; z-index: 1;">
				</div>	
 
 				<div style="position:absolute; top:12%; left:29%; font-size:1.5vw; z-index: 1;">
					<a style="color:white; text-decoration: none; cursor:pointer; " href="page1.html" >Page1</a>
				</div>	
 </div>
 </div>

enter image description here

0 个答案:

没有答案