如何使 <div> 始终全屏？答案

【问题标题】：How to make a <div> always full screen?如何使 <div> 始终全屏？
【发布时间】：2010-12-15 17:20:13
【问题描述】：

不管它的内容如何。

可以这样做吗？

【问题讨论】：

这里有很多很好的答案，但我没有看到任何提到 flexbox，所以我想我会分享这 2 美分：让父 div 为 100% 是一回事，但是如果需要在该 div 中放置、排列和居中某些内容，您将需要查看 flexbox。 css-tricks.com/snippets/css/a-guide-to-flexbox

【解决方案1】：

这对我总是有效的：

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        html, body {
            height: 100%;
            margin: 0;
        }

        #wrapper {
            min-height: 100%; 
        }
    </style>
    <!--[if lte IE 6]>
    <style type="text/css">
        #container {
            height: 100%;
        }
    </style>
    <![endif]-->
</head>

<body>
    <div id="wrapper">some content</div>
</body>

这可能是解决此问题的最简单方法。只需要设置四个CSS属性（虽然其中一个只是为了让IE开心）。

【讨论】：

@AdamHarte 为什么如果从 CSS 中删除 'html' 选择器就不起作用？ → 身体 { 身高：100%；边距：0； }
@P.Alex 数学！如果您的 HTML 标记高度拉伸以适应其内容，那么主体高度是其父级的 100%，那么您将不会强制它达到 100% 的可用空间。

【解决方案2】：

不幸的是，CSS 中的height 属性并不像应有的那样可靠。因此，必须使用 Javascript 将相关元素的高度样式设置为用户视口的高度。是的，这可以在没有绝对定位的情况下完成......

<!DOCTYPE html>

<html>
  <head>
    <title>Test by Josh</title>
    <style type="text/css">
      * { padding:0; margin:0; }
      #test { background:#aaa; height:100%; width:100%; }
    </style>
    <script type="text/javascript">
      window.onload = function() {
        var height = getViewportHeight();

        alert("This is what it looks like before the Javascript. Click OK to set the height.");

        if(height > 0)
          document.getElementById("test").style.height = height + "px";
      }

      function getViewportHeight() {
        var h = 0;

        if(self.innerHeight)
          h = window.innerHeight;
        else if(document.documentElement && document.documentElement.clientHeight)
          h = document.documentElement.clientHeight;
        else if(document.body) 
          h = document.body.clientHeight;

        return h;
      }
    </script>
  </head>
  <body>
    <div id="test">
      <h1>Test</h1>
    </div>
  </body>
</html>

【讨论】：

如果您使用 jQuery 之类的库（推荐），最好通过 $(window).height(); 获取高度。
有纯css解决方案吗？
@Mask 不，没有。反正还没有。
@Jed 您如何尝试应用 min-height:100% 并在 Mac-Safari 中尝试，也许我们可以在这里找到解决方案。我认为这比争论平台要好。
这适用于 IE7、Chrome3 和 Safari4 和 Opera10。全部在 Windows 上测试。缺点是它使用 javascript，这是 Mask 想要避免的（参见他对这个答案的评论）。 TandemAdam的答案是纯 CSS，适用于我测试过的所有浏览器，除了 Opera。

【解决方案3】：

这应该可以，虽然我没有 IE 来测试。

<html>
<head>
    <title>Hellomoto</title>
    <style type="text/css">
        .hellomoto
        {
            background-color:#ccc;
            position:absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            overflow:auto;
        }
        body
        {
            background-color:#ff00ff;
            padding:0px;
            margin:0px;
            width:100%;
            height:100%;
            overflow:hidden;
        }
        .text
        {
            background-color:#cc00cc;
            height:800px;
            width:500px;
        }
    </style>
</head>
<body>
<div class="hellomoto">
    <div class="text">hellomoto</div>
</div>
</body>
</html>

【讨论】：

您不需要将宽度设置为 100%
我不明白；您在 DIV 上硬编码 800px 的高度。 OP 希望这是动态的。
哦，抱歉，没有看到那里（或顶部/左侧）偷偷摸摸的绝对。好吧，那很好:)
附带说明，如果页面可以滚动，您可能希望使用position: fixed，但请注意，它在某些移动浏览器中不起作用caniuse.com/#feat=css-fixed
我听说有更现代的方法可以解决这个问题。 @Tubbe 你知道这是不是真的？

【解决方案4】：

这是我使用纯 css 创建全屏 div 的解决方案。它显示一个全屏 div，它在滚动时是持久的。如果页面内容适合屏幕，页面将不会显示滚动条。

在 IE9+、Firefox 13+、Chrome 21+ 中测试

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(51,51,51,0.7);
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='overlay'>Selectable text</div>
  <p> This paragraph is located below the overlay, and cannot be selected because of that :)</p>
</body>
</html>

【讨论】：

【解决方案5】：

使用现代浏览器执行此操作的最佳方法是使用Viewport-percentage Lengths，然后将browsers which do not support those units 回退到常规百分比长度。

视口百分比长度基于视口本身的长度。我们将在这里使用的两个单位是vh（视口高度）和vw（视口宽度）。 100vh 等于视口高度的 100%，100vw 等于视口宽度的 100%。

假设以下 HTML：

<body>
    <div></div>
</body>

您可以使用以下内容：

html, body, div {
    /* Height and width fallback for older browsers. */
    height: 100%;
    width: 100%;

    /* Set the height to match that of the viewport. */
    height: 100vh;

    /* Set the width to match that of the viewport. */
    width: 100vw;

    /* Remove any browser-default margins. */
    margin: 0;
}

这是一个JSFiddle demo，它显示了div 元素填充了结果帧的高度和宽度。如果您调整结果框架的大小，div 元素也会相应地调整大小。

【讨论】：

【解决方案6】：

这是最稳定（也是最简单）的方法，它适用于所有现代浏览器：

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: auto;
  background: lime; /* Just to visualize the extent */
  
}

<div class="fullscreen">
  Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa. Suspendisse aliquam in ante a ornare. Pellentesque quis sapien sit amet dolor euismod congue. Donec non semper arcu. Sed tortor ante, cursus in dui vitae, interdum vestibulum massa.
</div>

_{经测试可在 Firefox、Chrome、Opera、Vivaldi、IE7+ 中运行（基于 IE11 中的仿真）。}

【讨论】：

如果您使用以下内容效果会更好：position: fixed; top: 0; left: 0; 现在不同的部分：width: 100%; height: 100%;。这实际上在旧版浏览器中也能完美运行。
为什么使用宽度和高度比使用底部和右侧更好？如果你使用宽度和高度，并且还想要一些填充和/或边框，你还需要确保你有box-sizing: border-box;，否则你会得到更大的框，这会导致滚动。见this。

【解决方案7】：

这是我使用的技巧。适合响应式设计。当用户尝试调整浏览器大小时完美运行。

<head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style type="text/css">
        #container {
            position: absolute;
            width: 100%;
            min-height: 100%;
            left: 0;
            top: 0;
        }
    </style>
</head>

<body>
    <div id="container">some content</div>
</body>

【讨论】：

几乎与 Ned Smith 从 09 年删除的答案相同，但使用 min-height 而不是他使用 height 的答案。很高兴看到这个解决方案至少以某种形式返回到答案列表中。

【解决方案8】：

我发现最好的优雅方式如下所示，这里最技巧是制作div的position: fixed。

.mask {
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

<html>
  <head>
  <title>Test</title>
  </head>
  <body>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <h1>Whatever it takes</h1>
    <div class="mask"></div>
    </body>
  </html>

【讨论】：

【解决方案9】：

将body 元素更改为弹性容器，将div 更改为弹性项目：

body {
  display: flex;
  height: 100vh;
  margin: 0;
}

div {
  flex: 1;
  background: tan;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案10】：

这是基于vh 的最短解决方案。请注意some older browsers 不支持vh。

CSS：

div {
    width: 100%;
    height: 100vh;
}

HTML：

<div>This div is fullscreen :)</div>

【讨论】：

很方便，但在移动浏览器中存在问题：css-tricks.com/the-trick-to-viewport-units-on-mobile
为什么要复杂化？这可以在移动浏览器 DuckDuckGo 5.54.0、Samsung Internet 11.2.1.3 和 Chrome 81.0.4044.138 以及桌面浏览器上完成； Brave 1.10.97、Chrome 83.0.4103.116 和 Safari 12.1.2。