html - 左侧导航的 div 不会随着内容展开。高度 :auto not working

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;}