Question

我想让div适合用户屏幕的初始高度和宽度。

我认为以下粗略绘制的图解释得更好：

enter image description here

#div
{
 width: 100%;
 height: 100%;
}

似乎不起作用

Answer 1

如果我理解正确（这里有一些的混淆空间）：

http://jsfiddle.net/zRpNp/

#screenFiller {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border: 15px solid orange
}

您可能会追踪position: fixed版本：http://jsfiddle.net/zRpNp/1/

Answer 2

我个人喜欢纯CSS解决方案。只需使用vh单元。

#filldiv
{
    height: 100vh;
}

这将使div填充浏览器窗口的高度。

此外，您还可以填充浏览器窗口的宽度，这只使用vw单位。

#filldiv
{
    width: 100vw;
}

两者都显示在this fiddle

中

我个人非常喜欢这两个单元，因为它们可用于动态调整字体大小等内容。

Answer 3

在div中将高度设置为100％意味着你的div将填充其容器的100％;不是页面的100％。

我建议您要么在div或其容器上使用min-height声明，要么使用JavaScript来查找用户屏幕的初始高度（因为每个人都会略有不同）并将其设置为div上的内联样式。

以下行代码将返回屏幕尺寸：

var x,y;
if (self.innerHeight) // all except Explorer
{
  x = self.innerWidth;
  y = self.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight)
// Explorer 6 Strict Mode
{
  x = document.documentElement.clientWidth;
  y = document.documentElement.clientHeight;
}
else if (document.body) // other Explorers
{
  x = document.body.clientWidth;
  y = document.body.clientHeight;
}

Answer 4

您也可以使用CSS完成此操作：

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    width: 100%;
}

div {
    height: 100%;
    width: 100%;
}

Answer 5

仅使用CSS执行此操作的另一种方法...

http://jsfiddle.net/pxfunc/qQ45K/

html, body {height:100%;} /* explicitly set html & body height */

#fillScreen {
    position:relative;
    top:0;
    left:0;
    height:100%;
    width:100%;
}

Answer 6

我认为这是最简单的方法......让浏览器告诉他身高......使用java脚本

`

<html>
<head>
<title>viewport</title>
<style type="text/css">
  * { padding:0; margin:0; }
  #test { background:#aaa; height:100%; width:100%; }
</style>
<script type="text/javascript">
  window.onload = function() {
    var height = getViewportHeight();
    alert("This is what it looks like before the Javascript. Click OK to set the          height.");
    if(height > 0)
      document.getElementById("test").style.height = height + "px";
  }
  function getViewportHeight() {
    var h = 0;
    if(self.innerHeight)
      h = window.innerHeight;
    else if(document.documentElement && document.documentElement.clientHeight)
      h = document.documentElement.clientHeight;
    else if(document.body) 
      h = document.body.clientHeight;
  return h;
  }
</script>
 </head>
 <body>
  <div id="test">
  <h1>Test</h1>
  </div>
  </body>
 </html>`

Answer 7

为澄清...

我将使用vh和vw（视口高度和视口宽度）

<html>
 <body>
  <div style="height:100vh;width:100vw">First screen section, fills a whole screen</div>
  <div style="height:100vh;width:100vw;">Hmm... this too</div>
 </body>
</html>

100％无效，因为它只能填充100％的容器（主体），而不填充屏幕。

编辑：一些浏览器不支持它，但是我发现大多数现代浏览器都支持

Answer 8

<html><body style="margin: 0;">
<div style="height: 100%; width: 100%; background: #ccc;">a</div>
<div style="background: #777;height: 100%; width: 100%">b</div>
</body>
</html>

适合我

Answer 9

您的css样式正在寻找id="div"而非div标签。假设您的div以<body>或其他100％，100％html元素为父级，这应该可以正常工作：

<div id="fullViewPort">
    My Content
</div>

#fullViewPort {
    width: 100%;
    height: 100%;
}

Answer 10

 <style>
    body    {
        margin:0;
        padding:0;
    }
    #try    {       
        height:100%;
        width:100%;
        margin:0;
        padding:0;
        clear:both;
    }
    #next   {
        height:10%;
    }
    </style>

    <body>
    <div id="try">hello1</div>
    <div id="next">hello2</div>
</body>

适合我。

使div适合初始屏幕

10 个答案: