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

for my web application, i would like the main div to be full screen (both width and height = 100%), and regardless of content, i want it to stay at that size. that means, if there are not much content, it shouldn't shrink, and if there are too much content, it shouldn't push this main div.

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

how can i do this?

我怎样才能做到这一点？

(i'm ok with hacks applied to this div, as long as it will keep contents hack-free)

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

6 个解决方案

#1

Or even just:

甚至只是：

<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 can be set to like.. 95%-99% or some such to account for slight inconsistencies in margins, etc.)

（html，正文可以设置为.. 95％-99％或一些这样的，以解释边距的轻微不一致等）

#2

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

Tested on putlocker: http://stylebot.me/styles/4035

在putlocker上测试：http：//stylebot.me/styles/4035

#3

Notice how most of these can only be used WITHOUT a DOCTYPE. I'm looking for the same answer, but I have a DOCTYPE. There is one way to do it with a DOCTYPE however, although it doesn't apply to the style of my site, but it will work on the type of page you want to create:

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

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

Now, this was mentioned earlier but I just wanted to clarify that this is normally used with a DOCTYPE, height:100%; only works without a DOCTYPE

现在，这是前面提到的，但我只想澄清一下，这通常与DOCTYPE一起使用，高度：100％;仅在没有DOCTYPE的情况下工作

#4

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

</div>
</html>

#5

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

#6

Use the HTML

使用HTML

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

and use the CSS:

并使用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;
}

Make sure that the HTML is in the root element.

确保HTML位于根元素中。

Hope this helps!

希望这可以帮助！

#1