如何制作全屏div，并防止内容改变大小？答案

【问题标题】：how to make a full screen div, and prevent size to be changed by content?如何制作全屏div，并防止内容改变大小？
【发布时间】：2011-03-17 14:46:00
【问题描述】：

对于我的 Web 应用程序，我希望主 div 为全屏（宽度和高度 = 100%），并且无论内容如何，我都希望它保持该大小。也就是说，如果内容不多，就不应该收缩，如果内容太多，就不应该推这个主div。

我该怎么做？

（我对应用于此 div 的 hack 没问题，只要它不会让内容受到 hack）

【问题讨论】：

标签： css fullscreen

【解决方案1】：

这是我的解决方案，我认为最好使用vh（视口高度）和vw（视口宽度），单位与当前视口的height 和width 有关

function myFunction() {
  var element = document.getElementById("main");
  element.classList.add("container");
}

.container{
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background-color: #333;
  margin: 0; 
  padding: 0; 
}

<div id="main"></div>
<button onclick="myFunction()">Try it</button>

【讨论】：

【解决方案2】：

#fullDiv {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    position: fixed;
}

【讨论】：

Stylebot.me 是死链接，域名已售出。

【解决方案3】：

我使用这种方法来绘制模态叠加层。

.fullDiv { width:100%; height:100%; position:fixed }

我认为这里的区别在于 position:fixed 的使用，它可能适用于您的用例，也可能不适用。

我也加了z-index:1000; background:rgba(50,50,50,.7);

然后，模态内容可以存在于该 div 中，并且页面上已经存在的任何内容在背景中仍然可见，但在滚动时被覆盖完全覆盖。

【讨论】：

【解决方案4】：

请注意其中大多数只能在没有 DOCTYPE 的情况下使用。我正在寻找相同的答案，但我有一个 DOCTYPE。但是，有一种方法可以使用 DOCTYPE，尽管它不适用于我网站的样式，但它适用于您要创建的页面类型：

div#full-size{
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    overflow:hidden;

现在，这在前面提到过，但我只是想澄清一下，这通常与 DOCTYPE 一起使用，height:100%;只能在没有 DOCTYPE 的情况下工作

【讨论】：

【解决方案5】：

使用 HTML

<div id="full-size">
    <div id="wrapper">
        Your content goes here.
    </div>
</div>

并使用 CSS：

html, body {margin:0;padding:0;height:100%;}
#full-size {
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    overflow:hidden;
}
#wrapper {
    /*You can add padding and margins here.*/
    padding:0;
    margin:0;
}

确保 HTML 位于根元素中。

希望这会有所帮助！

【讨论】：

你需要一些javascript来最大化浏览器窗口。
谢谢，这没问题，除了一个问题： - 如果一个元素正在推动包装器（因为它有 100% 的高度），包装器的高度超过屏幕，导致溢出。如果我从元素中删除 100% 的高度，那么它不会填充包装器。
@Byron：这不是真的。 JS 对此完全没有必要。现在唯一可能 100% 工作的浏览器是 IE6，这将视具体情况而定。

【解决方案6】：

#fullDiv {
  position: absolute;
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden; /* or auto or scroll */
}

【讨论】：

right:0 和 bottom:0 描述符是不必要的；他们将覆盖top 和left 描述符。这过去一直让我着迷； CSS 在这方面不像 Windows 窗体或 XAML。
@mattbasta：那么最好再检查一下你的工作。我在 FF 3.6、Safari 和 IE 中使用它，它在这三个版本中都运行良好。这就是我为模态弹出对话框制作透明“屏蔽窗口”的方式。
@mattbasta：哦，忘了说 Chrome 和 Opera。
它可能有效，但如果您正确设置宽度和高度，这些描述符是不必要的
@mattbasta：您说 right:0 和 bottom:0 描述符将覆盖 top 和 left。这是不正确的。不起作用的是 100% 宽度和 100% 高度，尤其是。如果您有边框和/或填充（以及跨浏览器实现）。我所展示的是我多年来一直没有问题地依赖的东西，也是我发现的唯一方法来保证在所有情况下都能实现造型目标。

【解决方案7】：

<html>
<div style="width:100%; height:100%; position:fixed; left:0;top:0;overflow:hidden;">

</div>
</html>

【讨论】：

【解决方案8】：

甚至只是：

<div id="full-size">
  Your contents go here
</div>

html,body{ margin:0; padding:0; height:100%; width:100%; }
#full-size{
  height:100%;
  width:100%;
  overflow:hidden; /* or overflow:auto; if you want scrollbars */
}

（html、body 可以设置为 like.. 95%-99% 或一些这样的值，以解决页边距的轻微不一致等问题。）

【讨论】：

这不适合我。（火狐）
@TomášZato：在 Firefox 中应该可以正常工作。多年来，我一直在 Firefox 上使用相同的方法。
不要忘记 css 声明中 body 旁边的 html（这就是我所缺少的）