设置HTML页面和浏览器窗口的大小 [英] Set size of HTML page and browser window
问题描述
我有一个div元素ID =container。我想将此元素设置为浏览器窗口中可见区域的大小。我使用下面的JS这样做。
var container = document.getElementById（container）;
container.style.height =（window.innerHeight）;
container.style.width = window.innerWidth;
但是，浏览器窗口大小大于可查看的大小，并显示水平和垂直滚动条。
编辑：
$ b
这应该是工作。
<！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>
背景颜色是有的，所以你可以看到这是如何工作的。将此代码复制到文件，并在浏览器中打开它。尝试使用CSS，看看会发生什么。
width：inherit; height：inherit; 从父元素中拉出宽度和高度。
尝试移除 h1 {...} code> CSS块，看看会发生什么。您可能会注意到布局以奇怪的方式反应。这是因为 h1 元素正在影响其容器的布局。您可以通过在容器或正文上声明 overflow：hidden; 来防止此情况。
您可以在 CSS盒模型上阅读。
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.
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?
EDIT:
I am basically asking, how can I make the document size the same as the viewport size?
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.
The width: inherit; height: inherit; pulls the width and height from the parent element. This should be the default and is not truly necessary.
Try removing the h1 { ... } CSS block and see what happens. You might notice the layout reacts in an odd way. This is because the h1 element is influencing the layout of its container. You could prevent this by declaring overflow: hidden; on the container or the body.
I'd also suggest you do some reading on the CSS Box Model.
这篇关于设置HTML页面和浏览器窗口的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
