适合网页筛选

Fit webpage to screen

本文关键字：筛选 网页      更新时间：2023-09-26

是否有一种标准的方法可以使我的页面占用整个屏幕而不需要任何滚动条?它会根据我使用的显示器而变化，所以我想标准化它。我唯一的想法是让所有的元素样式与百分比，但我希望会有一个属性像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
jQuery Doc on width

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>
相关文章：