对于我的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)
使用 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 位于根元素中。
希望这可以帮助!