设置 HTML 页面和浏览器窗口的大小答案

【问题标题】：Set size of HTML page and browser window设置 HTML 页面和浏览器窗口的大小
【发布时间】：2012-03-19 14:27:19
【问题描述】：

我有一个 ID="container" 的 div 元素。我想将此元素设置为浏览器窗口中可视区域的大小。我正在使用以下 JS 来执行此操作。

var container= document.getElementById("container");
container.style.height=(window.innerHeight);
container.style.width=window.innerWidth;

但是，浏览器窗口大小大于可视大小，并出现水平和垂直滚动条。如何使我的 HTML 页面适合浏览器窗口而不需要滚动条？

编辑：

我基本上是在问，如何使文档大小与视口大小相同？

【问题讨论】：

标签： html css resize scrollbar

【解决方案1】：

您可以在您的 CSS 中使用 width: 100%;。

【讨论】：

试过了。仍然使文档大小大于视口大小。

【解决方案2】：

这应该可行。

<!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 { ... } CSS 块，看看会发生什么。您可能会注意到布局以一种奇怪的方式做出反应。这是因为h1 元素正在影响其容器的布局。您可以通过在容器或主体上声明 overflow: hidden; 来防止这种情况发生。

我还建议您阅读CSS Box Model。

【讨论】：

它是“容器”的一个子元素，就像你建议的那样给我带来了问题。好决定。谢谢！

【解决方案3】：

<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>

【讨论】：

【解决方案4】：

你可以试试：

<html>
    <head>
        <style>
            #main {
                width: 500; /*Set to whatever*/
                height: 500;/*Set to whatever*/
            }
        </style>
    </head>
    <body id="main">
    </body>
</html>

【讨论】：