如何使div覆蓋整個屏幕

Question

我有個問題。

到目前為止，我得到了：

我基本上希望突出顯示的div可以覆蓋設備屏幕，無論設備屏幕有多大。 現在，當我在手機上打開它時，我會看到2個不同的div。 我只想看到突出顯示的那個。 我該如何實現？

預先感謝，凱文

Answer 1

您可以使用視口高度作為高度值：

 .main { height: 100vh; background-color: green; } 

 <div class="main"> CONTENT </div> 

使用height：100vh表示所討論的元素始終是用戶/ devie擁有的視口的100％高度。

更多信息： https ： //web-design-weekly.com/2014/11/18/viewport-units-vw-vh-vmin-vmax/

Answer 2

您可以通過將要全屏顯示的div的位置設置為absolute ，然后應用以下CSS來實現。

top:0;
left:0;
bottom:0;
right:0;
height:100%;
width:100%;

因此，最終的css如下

.fullscreen{
    position:absolute;
    top:0;
    left:0;
    bottom:0;
    right:0;
    height:100%;
    width:100%;
}

Answer 3

您可以使用position: absolute; 或position: fixed 。
使用absolute可以使其覆蓋整個頁面。
使用fixed使其釘在默認位置。 如果您使用fixed ，即使您的頁面超過100％，您也無法向下滾動以查看其他任何內容。

的CSS

div.any {
   position: absolute; /*position: fixed;*/
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   /*You can add anything else to this like image, background-color, etc.*/
}

的HTML

<div class="any"></div>

Answer 4

.video-container { position: absolute; top: 0; bottom: 0; width: 100%; height: 100%; overflow: hidden; object-fit: fill; } .video-container video { min-width: 100%; min-height: 100%; width: auto; height: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }