Question

我如何制作一个div，哪个位置是绝对的，将高度扩展100％？ div具有动态内容。

现在，如果添加更多内容，div不会扩展。如果我像400px一样增加了它的高度。

HTML：

<nav>
    <div class="navLeftBox">
        <ul>
            <li>
                <a href="#">Stuff</a>
            </li>
        </ul>
     </div>
</nav>

CSS：

nav{
    background: #c7c7c7;
    border: 1px solid #a2a2a2;
    height: 33px;
    width: 968px;
    padding: 14px 0 0 30px;
    margin-bottom:1px;
    clear:both;
    position:relative;
}
.navLeftBox {
    background: #bcbcbc;
    border: 1px solid #939393;
    height:100%;
    width:200px;
    z-index:2;
    position:absolute;
    top:20px;
    left:20px;
    clear:both;
}

我还在jsfiffle DEMO

上添加了它

谢谢！

Answer 1

如果您没有指定高度，则设备的高度会自动调整为内容或设置为heigth:auto; 即你需要设置heigth:auto;或简单地删除

DEMO

Answer 2

或者只需删除height:100%。

.navLeftBox {
    background: #bcbcbc;
    border: 1px solid #939393;
    width:200px;
    z-index:2;
    position:absolute;
    top:20px;
    left:20px;
    clear:both;
}

div位置绝对高度100％

2 个答案: