有没有一种标准方法可以让我的页面在没有任何滚动条的情况下占据整个屏幕?它会根据我使用的显示器而变化,因此我想对其进行标准化。我唯一的想法是让所有元素都使用百分比样式,但我希望会有类似的属性screen.height
。
谢谢你的帮助。
有没有一种标准方法可以让我的页面在没有任何滚动条的情况下占据整个屏幕?它会根据我使用的显示器而变化,因此我想对其进行标准化。我唯一的想法是让所有元素都使用百分比样式,但我希望会有类似的属性screen.height
。
谢谢你的帮助。
很多很多方式......我个人最喜欢的是一个巨大的包装器,你可以使用以下 CSS 将所有内容放入其中:
#WrapAll {
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
}
这一直有效到 IE7(我认为在那之前,但未经测试),并保证在任何基于标准的浏览器上呈现相同的内容。
如果您需要滚动内容,您可以为里面的项目设置溢出值。它在窗口内滚动,而不滚动整个窗口。
如果您不想这样做position:absolute;
(有些人对此感到不舒服),您可以通过以下方式完成类似的事情:
#WrapAll {
width:100%;
height:100%;
overflow:hidden;
}
这可能看起来更短,但由于浏览器呈现边距、边框等的方式,它也不太有保证。不过,在大多数情况下,这两种方式都可以工作。
如果我是你,我会使用 css,但 jQuery 确实让你得到这些值......
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
CSS 可能最适合这个。
<html>
<head>
<style>
html, body {
height: 100%;
}
.fixedOverlay {
position:absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow:hidden;
}
</head>
<body>
<div class="fixedOverlay">
hello world
</div>
</body>
</html>