Question

对于我的网络应用程序，我希望主要div是全屏（宽度和高度= 100％），并且无论内容如何，我希望它保持这个大小。这意味着，如果内容不多，则不应缩小，如果内容太多，则不应该推动这个主要内容。

我该怎么做？

（我很好用黑客应用于这个div，只要它能保持内容无黑洞）

Answer 1

甚至只是：

<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，正文可以设置为.. 95％-99％或其他一些，以解释边距的轻微不一致等）。

Answer 2

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

Answer 3

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

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

现在，这是前面提到过的，但我只是想说明这通常与DOCTYPE一起使用，高度：100％;只能在没有DOCTYPE

的情况下工作

Answer 4

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

</div>
</html>

Answer 5

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

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

我相信这里的区别是 position：fixed 的使用，它可能适用于您的用例，也可能不适用。

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

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

Answer 6

使用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位于根元素中。

希望这有帮助！

Answer 7

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

Answer 8

这是我的解决方案，我认为最好使用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>

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

8 个答案: