Question

我有一个左手导航渐变背景，需要根据页面正文中的内容量垂直展开。导航div（＃left-nav）设置为自动高度，但它只会扩展到其中列表的大小。如果我设置一个固定的高度，背景渐变会响应，但我无法弄清楚为什么高度：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;}

左手导航的div不会随内容扩展。高度：自动无法正常工作

1 个答案: