如何让一个div覆盖整个屏幕答案

【问题标题】：How to make a div cover the whole screen如何让一个div覆盖整个屏幕
【发布时间】：2016-09-14 16:18:02
【问题描述】：

我有一个问题。

到目前为止，我得到了这个：

我基本上希望突出显示的 div 覆盖您的设备屏幕，无论设备屏幕有多大。现在，当我在手机上打开它时，我看到了 2 个不同的 div。我只想看到突出显示的那个。我如何实现这一目标？

提前致谢，凯文

【问题讨论】：

将正文设置为height:100%;width:100% 然后.textboxtransparent {height:100%;width:100%}
请分享代码并创建一个显示问题的小提琴
How to make a <div> always full screen?的可能重复
您可以将视口的高度分配给div，例如height: 100vh
jsfiddle.net/dfv4gdw3 Js fiddle 已添加

标签： html css responsive

【解决方案1】：

您可以使用视口高度作为您的高度值：

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

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

使用 height: 100vh 表示相关元素始终是用户/设备拥有的视口的 100% 高度。

【讨论】：

@KevinAartsen 乐于助人！

【解决方案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%;
}

【讨论】：

【解决方案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>

【讨论】：

【解决方案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%);
}

【讨论】：