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

它确实有效，但就像我提到的那样：它是一个白色的div，如果它确实出现了你做了什么来证明这一点？

更改背景颜色证明它出现。

工作示例http://jsfiddle.net/Cr3f2/

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

    div {
    height:100vh;
    width:100vh;
    color:#FF0000;
    background-color:#FF0000;
}

Answer 2

也许这会有所帮助。由于“视口单元”目前没有很好的浏览器支持，您可能需要使用高度100％。视口单元浏览器支持表：http://caniuse.com/#search=vh

如果您希望div覆盖视口下方的区域到可滚动区域，请尝试以下代码：

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 标记上设置高度为100％，并设置 min-height 100％ 包装器div 上的。默认情况下，div将水平扩展100％。最小和最大宽度和高度具有很好的浏览器支持，IE6除外。（注意：如果您仍然需要支持IE6，那么有一个简单的方法可以使它工作。将它添加到您的wrapper-div中，但您的css将无法验证{*display:inline; *zoom:1;}）

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

这是一个JSFiddle，它同时具有100％和Viewport单元：http://jsfiddle.net/TalkingRock/ZHC5h/

如果要使用视口单元，请尝试使用此代码。它将宽度设置为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：视口宽度的1％
1vh：视口高度的1％
1vmin：1vw或1vh，无论什么是最小的
1vmax：1vw或1vh，无论什么是最大的

Answer 3

您将背景设置为白色。它不会显示。尝试使用＃000换黑。

Answer 4

也许你应该改变一下像这样的div属性：

div {
height:inherit;
width: inherit;
color:#000000;

}

这样它将继承body css选择器上已经指示的高度和宽度

Full-Page Div不显示

4 个答案: