Question

有没有一种标准方法可以让我的页面占用整个屏幕而不需要任何滚动条？它正在改变，取决于我正在使用的显示器，所以我想标准化它。我唯一的想法就是用百分比制作所有元素，但我希望有一个像screen.height之类的属性。

感谢您的帮助。

Answer 1

很多很多方面......我个人最喜欢的是一个巨大的包装器，你把所有内容放在下面的CSS中：

#WrapAll {
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    overflow:hidden;
}

这一直有效回到IE7（我想在此之前，但未经测试），并保证在任何基于标准的浏览器上呈现相同的内容。

如果需要滚动内容，可以设置内部项目的溢出值。它在窗口内滚动，没有整个窗口滚动。

如果您不想position:absolute;（某些人对此感到不舒服），您可以通过以下方式完成类似的事情：

#WrapAll {
    width:100%;
    height:100%;
    overflow:hidden;
}

这可能看起来更短，但由于浏览器渲染边距，边框等的方式，它也不太有保证。但是，无论哪种方式都适用于大多数情况。

Answer 2

如果我是你，我会使用css，但jQuery确实让你获得这些价值......

$(window).width();   // returns width of browser viewport
$(document).width(); // returns width of HTML document

jQuery Doc on width

Answer 3

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>

适合屏幕的网页

3 个答案: