如何使用CSS获取左导航列以填充网页中间的整个左侧？

Question

我正在制作这个网页：

http://jsfiddle.net/pW8yj/

我希望左侧导航区域一直向下延伸，从标题的底部到页脚的顶部。我尝试设置高度：100％，但似乎没有用。我有什么问题吗？

Answer 1

更改CSS，将左侧绝对定位，并将内容区域左边距定位为等于为左区域指定的宽度

#middleArea { 

}

#leftArea { 
    vertical-align: top;
    width: 150px;
    height: 80%;
    background-color: gray;
    position: absolute;
}

#contentArea { 
    vertical-align: top;
    margin: 30px 30px 30px 150px;
    border: 1px dotted orange;
    width: 600px;
    display: block;
    border: 1px solid black;

}

Answer 2

这将永远不会像你期望的那样发挥作用。您不能为元素设置100％的高度，因为它将达到其内容的100％，而不是其父容器的高度。

我建议做的是从leftNAv区域移除背景，而是在div id =“middleArea”上设置重复背景，灰色部分为repeat-y。这样，无论#middleArea有多大，背景都会随之扩展。

您可以尝试使用Faux Columns等资源，这些资源可能会为您提供模板和您正在寻找的其他结果：

http://www.code-sucks.com/css%20layouts/faux-css-layouts/

干杯。