css - 整页 Div 不显示

Question

我有一个只有一个 div 的 HTML 页面。主体代码如下所示:

<div>
</div>

CSS 看起来像这样:

body {
    margin:0;
    height:100vh;
    width:100vh;
}

    div {
    height:100vh;
    width:100vh;
    color:#000000;
}

我在另一个 stackoverflow 帖子 here 上看到了这样的例子.

我一定是傻了。无论如何，我做到了，所以我可以看到 div，它现在占据了整个高度，但不是整个宽度。它占用的空间略多于 1/2。

Answer 1

也许这会有所帮助。因为“Viewport Units”目前没有很好的浏览器支持，你可能想要使用 height 100% 来代替。 视口(viewport)单元浏览器支持表:http://caniuse.com/#search=vh

如果您希望 div 覆盖视口(viewport)下方进入可滚动区域的区域，请尝试以下代码:

html{
margin:0;
padding:0;
border:none;
height:100%;
}

body {
margin:0;
padding:0;
border:none;
height:100%;
}

#wrapper-div {
min-height:100%;
}

诀窍是在 html 和 body 标签上将 height 设置为 100%，并将 min-height 设置为 100% 在 wrapper div 上。默认情况下，div 将水平扩展 100%。最小和最大宽度和高度有很好的浏览器支持，除了 IE6。 (注意:如果您仍然需要支持 IE6，有一个简单的 hack 可以让它工作。将它添加到您的 wrapper-div，但您的 css 不会验证 {*display:inline; *zoom: 1;})

浏览器对最小和最大高度和宽度的支持 http://caniuse.com/minmaxwh

这是一个同时具有 100% 和视口(viewport)单位的 JSFiddle:http://jsfiddle.net/TalkingRock/ZHC5h/

---

如果您想使用视口(viewport)单位，请尝试此代码。它将宽度设置为 vw，而不是 vh:

body {
margin:0;
height:100vh;
width:100vw;
}

#wrapper-div {
height:100vh;
width:100vw;
background-color:#cccccc;
color:#000000;
}

引用这篇文章:http://dev.opera.com/articles/view/css-viewport-units/

• 1vw:视口(viewport)宽度的 1%
• 1vh:视口(viewport)高度的 1%
• 1vmin:1vw 或 1vh，取最小者
• 1vmax:1vw 或 1vh，取最大者