设置 HTML 页面和浏览器窗口的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9510359/
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
Set size of HTML page and browser window
提问by moesef
I have a div element with ID="container". I want to set this element to be the size of the viewable area in the browser window. I am using the following JS to do so.
我有一个 ID="container" 的 div 元素。我想将此元素设置为浏览器窗口中可视区域的大小。我正在使用以下 JS 来做到这一点。
var container= document.getElementById("container");
container.style.height=(window.innerHeight);
container.style.width=window.innerWidth;
However, the browser window size is larger than the viewable size and horizontal and vertical scroll bars appear. How do I make it so that my HTML page fits into the browser window without a need for scroll bars?
但是，浏览器窗口大小大于可视大小，并且出现水平和垂直滚动条。如何使我的 HTML 页面适合浏览器窗口而不需要滚动条？
EDIT:
编辑：
I am basically asking, how can I make the document size the same as the viewport size?
我基本上是在问，如何使文档大小与视口大小相同？
回答by twaddington
This should work.
这应该有效。
<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background-color: green;
}
#container {
width: inherit;
height: inherit;
margin: 0;
padding: 0;
background-color: pink;
}
h1 {
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="container">
<h1>Hello World</h1>
</div>
</body>
</html>
The background colors are there so you can see how this works. Copy this code to a file and open it in your browser. Try playing around with the CSS a bit and see what happens.
背景颜色在那里，所以你可以看到它是如何工作的。将此代码复制到一个文件中，然后在浏览器中打开它。尝试使用 CSS 并看看会发生什么。
The width: inherit; height: inherit;pulls the width and height from the parent element. This shouldbe the default and is not truly necessary.
的width: inherit; height: inherit;拉动从父元素的宽度和高度。这应该是默认设置，并不是真正必要的。
Try removing the h1 { ... }CSS block and see what happens. You might notice the layout reacts in an odd way. This is because the h1element is influencing the layout of its container. You could prevent this by declaring overflow: hidden;on the container or the body.
尝试删除h1 { ... }CSS 块，看看会发生什么。您可能会注意到布局以一种奇怪的方式做出反应。这是因为该h1元素正在影响其容器的布局。您可以通过overflow: hidden;在容器或主体上声明来防止这种情况发生。
I'd also suggest you do some reading on the CSS Box Model.
我还建议您阅读CSS Box Model。
回答by yvoyer
You could use width: 100%;in your css.
你可以width: 100%;在你的css中使用。
回答by Vikash pathak
<html>
<head >
<title>Welcome</title>
<style type="text/css">
#maincontainer
{
top:0px;
padding-top:0;
margin:auto; position:relative;
width:950px;
height:100%;
}
</style>
</head>
<body>
<div id="maincontainer ">
</div>
</body>
</html>
回答by Foo
You could try:
你可以试试：
<html>
<head>
<style>
#main {
width: 500; /*Set to whatever*/
height: 500;/*Set to whatever*/
}
</style>
</head>
<body id="main">
</body>
</html>
