使一个div适应初始屏幕大小

Question

使一个div适应初始屏幕大小

46

我希望将一个div适应用户屏幕的初始高度和宽度。

我认为下面这个简陋的示意图更好地解释了这一点:

在此输入图片描述

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

似乎不起作用

- jonnnnnnnnnie

4

SO中已经有至少一百个类似的问题了。 - Shad

1

啊，SO上那些毫无意义的贬低性评论的好日子。 - pianoman102

11个回答

45

个人而言，我喜欢纯 CSS 解决方案。只需使用 vh 单位。

#filldiv
{
    height: 100vh;
}

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

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

#filldiv
{
    width: 100vw;
}

这两个组件都在此代码片段中展示。

我个人喜欢这两个组件，因为它们可以用于动态调整字体大小等内容的大小。

- tinfoilboy

你会如何将高度改为宽度？ - Gradyn Wursten

@Tinfoilboy 这真的很优雅！你知道它在不支持的浏览器中会如何破裂吗？ - Dionysis

您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - tinfoilboy

6

为了澄清...

我会使用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% 不起作用是因为它只填充容器(body)的100%，而不是整个屏幕。

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

- jamesrchen

这段代码在桌面/笔记本浏览器上可以正常工作，但在移动视图中显示时，某些内容会重叠。 - Vicky Gupta

1

在 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;
}

- Phil.Wheeler

+1 表示认识到 height=100% 相对于父容器的高度是需要显式设置的。-1 表示未使用纯 CSS 解决方案，使用 position 属性设置建议中提到的所有四个边缘。 - Brent Friar

1

你也可以完全使用CSS来做到这一点：

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

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

- Jordan

1

还有一种只使用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%;
}

- MikeM

1

我认为这是最简单的方法...让浏览器告诉高度...使用JavaScript

`

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

- Telwa Gangnam

0

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

对我有用

- Ascherer

0

你的 CSS 样式正在寻找一个 id="div" 而不是一个 div 标签。假设你的 div 是由 <body> 或另一个 100%，100% 的 HTML 元素作为父元素，那么这应该可以工作：

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

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

- Ben Roux

0

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

对我来说可行。

- Phphelp

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thirtydot · Accepted Answer

如果我理解正确的话（这里可能有一些困惑）：

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/