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

Posted 2023-02-19

【中文标题】如何让一个div覆盖整个屏幕

【英文标题】：How to make a div cover the whole screen

【发布时间】：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 已添加

【参考方案1】：

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

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

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

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

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

【讨论】：

@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%);