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

thr*_*007 37 css fullscreen

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

我怎样才能做到这一点?

(我很适合应用于这个div的黑客,只要它能保持内容没有黑客)

luc*_*eer 41

甚至只是:

<div id="full-size">
  Your contents go here
</div>
Run Code Online (Sandbox Code Playgroud)
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 */
}
Run Code Online (Sandbox Code Playgroud)

(html,正文可以设置为.. 95%-99%或一些这样的,以解释边距的轻微不一致等)


Jum*_*ink 18

#fullDiv {
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    overflow: hidden;
    position: fixed;
}
Run Code Online (Sandbox Code Playgroud)


小智 9

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

div#full-size{
    position: absolute;
    top:0;
    bottom:0;
    right:0;
    left:0;
    overflow:hidden;
Run Code Online (Sandbox Code Playgroud)

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


小智 6

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

</div>
</html>
Run Code Online (Sandbox Code Playgroud)


mat*_*sta 1

使用 HTML

<div id="full-size">
    <div id="wrapper">
        Your content goes here.
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

并使用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;
}
Run Code Online (Sandbox Code Playgroud)

确保 HTML 位于根元素中。

希望这可以帮助!