Question

我刚刚为朋友创建了第一个正确的HTML网站，我想知道如何让网站自动调整页面？

这是一种不需要滚动的景观设计。

Answer 1

您应该将body和html设置为position:fixed;，然后设置right:，left:，top:和{{3}到0;。这样，即使内容溢出，它也不会超出视口的限制。

例如：

<html>
<body>
    <div id="wrapper"></div>
</body>
</html>

CSS：

html, body, {
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

警告：使用此方法，如果用户缩小窗口，内容将被切断。

Answer 2

如果它在景观中，那么你将需要更多的宽度和更少的高度！这就是所有网站都有的。

让我们先用基本的，然后是其余的！

基本CSS：

通过CSS你可以做到这一点，

#body {
width: 100%;
height: 100%;
}

这里使用的是带有id正文的div，如：

<body>
  <div id="body>
    all the text would go here!
  </div>
</body>

然后，您可以拥有100%高度和宽度的网页。

如果他试图调整窗口大小怎么办？

问题突然出现，如果他试图调整窗口大小怎么办？然后#body内的所有元素都会试图搞砸UI。为此你可以这样写：

#body {
height: 100%;
width: 100%;
}

只需添加min-height max-height min-width和max-width。

这样，页面元素将保留在页面加载的位置。

使用JavaScript：

使用JavaScript，您可以控制UI，使用jQuery：

$('#body').css('min-height', '100%');

所有其他剩余的CSS属性，当用户尝试调整窗口大小时，JS将负责用户界面。

如何不向网页添加滚动：

如果您不想添加滚动，那么您可以使用此JS

$('#body').css('min-height', screen.height); // or anyother like window.height

这样，只要用户加载页面，文档就会获得一个新的高度。

第二个选项更好，因为当用户拥有不同的屏幕分辨率时，他们会想要为自己的屏幕创建CSS或样式表。不适合其他人！

提示：因此，请尝试使用JS查找当前的屏幕大小并编辑页面！：）

Answer 3

您可以使用css来执行此操作

<style>
html{
    width:100%;
    height:100%;
}
body{
    width:100%;
    height:100%;
    background-color:#DDD;
}
</style>