Search code examples
htmlcsspositionabsolute

div position absolute height 100%

How can i make a div, which position is absolute, expand height 100%? The div has dynamic content.

Right now the div doesn't expand if i added more content. If i added the height like 400px it expand.

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

I also added it on jsfiffle DEMO

Thank you!

Solution

  • if you do not specify a height the height of the unit automatically adjusts to the content or set to heigth:auto; ie you need to set the heigth:auto; or simply remove

    DEMO