Html 如何让页面自动适应窗口？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19201715/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I get a page to auto fit to a window?
提问by JoeJoe2416
How would I be able to get a website to autofit the page?
我怎样才能让网站自动调整页面？
It's a landscape design which needs no scrolling.
这是一个不需要滚动的景观设计。
回答by JSW189
You should set bodyand htmlto 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:到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;
}
Caveat: Using this method, if the user makes their window smaller, content will be cut off.
警告：使用这种方法，如果用户将窗口变小，内容将被切断。
回答by Afzaal Ahmad Zeeshan
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 idbody, as:
在这里，您使用的是带有idbody的 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 #bodywould try to mess up the UI. For that you can write this:
问题出现了，如果他试图调整窗口大小怎么办？然后里面的所有元素#body都会试图弄乱 UI。为此，您可以这样写：
#body {
height: 100%;
width: 100%;
}
And just add min-heightmax-heightmin-widthand max-width.
只需添加min-heightmax-heightmin-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 查找当前屏幕大小并编辑页面！:)
回答by user1825286
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>
