如何让页面自动适合窗口？

I've just started my first proper HTML website for a friend, and I was wondering how I would be able to get the website to autofit the page?

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

It's a landscape design which needs no scrolling.

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

3 个解决方案

#1

You should set body and html to position:fixed;, and then set right:, left:, top:, and bottom: to 0;. That way, even if content overflows it will not extend past the limits of the viewport.

你应该将body和html设置为position：fixed;，然后设置right：，left：，top：和bottom：to 0;。这样，即使内容溢出，它也不会超出视口的限制。

For example:

例如：

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

CSS:

CSS：

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

JS Fiddle Example

JS小提琴示例

Caveat: Using this method, if the user makes their window smaller, content will be cut off.

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

#2

If its in a landscape then you will be needing more width and less height! That's just what all websites have.

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

Lets go with a basic first then the rest!

让我们先做一个基本的，然后是其余的！

The basic CSS:

基本的CSS：

By CSS you can do this,

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

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

Here you are using a div with id body, as:

在这里，您使用带有id body的div，如下所示：

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

Then you can have a web page with 100% height and width.

然后你可以有一个100％高度和宽度的网页。

What if he tries to resize the window?

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

The issues pops up, what if he tries to resize the window? Then all the elements inside #body would try to mess up the UI. For that you can write this:

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

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

And just add min-height max-height min-width and max-width.

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

This way, the page element would stay at the place they were at the page load.

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

Using JavaScript:

使用JavaScript：

Using JavaScript, you can control the UI, use jQuery as:

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

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

And all other remaining CSS properties, and JS will take care of the User Interface when the user is trying to resize the window.

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

How to not add scroll to the web page:

如何不向网页添加滚动：

If you are not trying to add a scroll, then you can use this JS

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

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

This way, the document will get a new height whenever the user would load the page.

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

Second option is better, because when users would have different screen resolutions they would want a CSS or Style sheet created for their own screen. Not for others!

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

Tip: So try using JS to find current Screen size and edit the page! :)

提示：所以尝试使用JS查找当前屏幕大小并编辑页面！ :)

#3

you can use css to do it for example

你可以使用css来做到这一点

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

#1