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

问题描述：

我有一个ID为“container”的div元素。我想将此元素设置为浏览器窗口中可查看区域的大小。我正在使用下面的JS来做到这一点。设置HTML页面和浏览器窗口的大小

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

但是，浏览器窗口大小大于可查看的大小，并出现水平和垂直滚动条。我该如何制作这样才能让我的HTML页面适合浏览器窗口而不需要滚动条？

编辑：

我基本上是问，我怎样才能使文件大小一样的视区大小？

答

这应该工作。

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

这是一个“容器”的子元素，它就像你所建议的那样给我提出问题。好决定。谢谢！ – moesef 2012-03-01 06:06:15

答

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

试过。仍然使文档尺寸大于视口尺寸。 – moesef 2012-03-01 04:03:17

答

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

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

相关推荐