CSS使底部容器高度达到可见空间的100％

Question

http://jsfiddle.net/n8YsM/

如何使div id为蓝色占用容器div之后的剩余可见空间。此div也应该没有内容。

Answer 1

使用此CSS：

/*add this:*/
html, body
{
    height: 100%;
}

.clear
{clear:both;
display:block;
overflow:hidden;
visibility:hidden;
width:0;
height:0;

}
#blue
{width:100%;
background:blue;
/*and this*/height:100%;
}

Updated fiddle

要让浏览器检测到您要将蓝色div扩展为100％，您必须告知HTML和页面正文为100％，否则div无需引用百分比。

希望它可以帮助你。

Answer 2

将css更改为：

#container{margin-left:auto;margin-right:auto;width:200px;}

html,body { height:100%; }

.clear{clear:both;display:block;overflow:hidden;visibility:hidden;width:0;height:0;}

#blue{width:100%;background:blue;height:100%;}

你也必须扩展页面的高度。

Answer 3

这样的事情？ http://jsbin.com/uxeda4