css全高？

Question

我正在构建一个3列网页（左侧导航栏上方的标题和菜单栏，主区域和右侧边栏，底部有一个全宽页脚）。我有每列的背景颜色，但它们在文本末尾切断而不是填满整列。有没有办法填充整个列，而不依赖于使用表（td）？

这是我的CSS总体布局：

#container
{
    float: left;
    width: 100%; /* IE doubles the margins on floats, this takes care of the problem */
    display: inline; /* this is where Ryan Brill (author of the ALA's article) and I go in "opposite directions" */
    margin-left: -200px;
}
#left
{
    float: left;
    width: 180px; /* IE doubles the margins on floats, this takes care of the problem */
    display: inline;
    margin-left: 200px;
    padding: 0px 0px 0px 5px;
    background: url('/App_Themes/Default/images/RightColumnBackground.png') repeat left top;
}
#main
{
    /* the width from #left (180px) + the negative margin from #container (200px) */
    margin-left: 380px;
    padding: 0px 0px 0px 5px;
}
#sidebar
{
    /* this is to keep the content of #sidebar to the right of #main even if the content of "main is shorter */
    padding-left: 100%; /* this is to "bring back" the #sidebar that has been moved out of the viewport because of the padding value */
    margin-left: -220px;
}

我知道我可以在样式中设置高度，但是将高度固定到一定数量的像素。是否有height: fill;类型选项？

Answer 1

这是一个非常常见的问题。一个好方法是使用faux columns。

Answer 2

目前在浏览器中广泛支持的任何CSS都没有，但有ways of approximating it。

Answer 3

您需要的是Perfect Liquid Layout in Percentage widths，em widths或pixel widths。