为什么我在CSS中看不到我的盒子？

Question

我被告知要使用position: relative但是当我在浏览器中查看时它没有出现，请问您能告诉我原因吗？

这是我的代码：

HTML：

<div id="box"></div>

CSS：

#box
{
    position: relative;
    height: 20%;
    width: 20%;
    background: #366;
}

Answer 1

只需将html, body {height:100%}添加到CSS文件中即可。

<强> http://jsfiddle.net/LGJH4/

Answer 2

问题在于CSS计算。默认情况下，HTML页面没有高度。 因此，高度的20％仅为0，因为它相对于具有0高度的HTML而言。

您的选项是为#div建议像素高度或为整个文档指定高度。

#box {
    height:100px;
}

or

html,body {
    height: 100%;
}
/*** Write your css here ***/

这是一个小提琴，http://jsfiddle.net/Pj6Ra/1/

Answer 3

通常，如果父元素没有定义的高度，%高度将导致0px。您需要使用不同的高度单位，例如px或em。 E.g。

#box {
    height:200px;
}

有趣的是，你可以使用padding-bottom: 20%，虽然这不会给你预期的结果。高度是视口的宽度的20％，而不是高度。

Answer 4

试试这段代码：

<强> DEMO

   html,body
{
    height:100%;
}