CODEWITHSUNDEEP
htmlcsspositionabsolute
egolive
egolive

Reputation: 397

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!

Upvotes: 1

Views: 6365

Answers (2)

Brian Coolidge
Brian Coolidge

Reputation: 4649

Or just remove the height:100%.

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

Upvotes: 1

Alex Wilson
Alex Wilson

Reputation: 2419

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

Upvotes: 2

Related Questions