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 .