左侧导航的 div 不会随内容扩展。高度：自动不工作

Question

我有一个左侧导航渐变背景，需要根据页面正文中的内容量垂直扩展。导航 div (#left-nav) 设置为自动高度，但它只会扩展到其中列表的大小。如果我设置了固定高度，背景渐变会响应，但我不知道为什么 height:auto 不起作用。

任何帮助将不胜感激。谢谢！

这里的代码只使用了黑色背景，以避免多余的渐变代码：

HTML：

<div id="content">
<div id="left-nav">
    <ul class="nav-list">
        <li><a class="class3" href="#">nav 1</a></li>
        <li><a class="class3" href="#">nav 2</a></li>
        <li><a class="class3" href="#">nav 3</a></li>
        <li><a class="class3" href="#">nav 4</a></li>                                       
    </ul>
</div>

<div id="body-main">
    <p>content</p>

    </div>
</div>

CSS：

.content {float:left; width:1000px;}
#left-nav {background:#000000; float:left; height:auto; width:180px;}
#left-nav li a {display: block; font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif; font-weight: normal; font-size: 15px; line-height: 17px; padding-left: 10px; padding-bottom:20px;}
.nav-list {padding-top:25px; width:180px;}
a.class3 {color:#ffffff; text-decoration:none; }

Answer 1

试试这个...

.content {positon:relative;float:left; width:1000px;}
#body-main {margin-left:200px;}
#left-nav {position:absolute;top:0;left:0;bottom:0;width:180px;background:#000000;}