Question

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

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

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

编辑：

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

Answer 1

这应该有用。

<!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上阅读。

Answer 2

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

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

Answer 4

您可以尝试：

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

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

4 个答案: