CODEWITHSUNDEEP
htmlcss
ram_c
ram_c

Reputation: 87

Setting display:none div inside div still takes up space

I have a main div contains two divs (one for heading and other for content). the main div is placed at the bottom of the html page with absolute positioning. When I hide content div, it sill takes up space in the bottom of the page.

I need to show only the header div to do a jquery toggle..

<div class="tll">
    <div class="tllH">

    </div>
    <div class="tllC">

    </div>
</div>

<style>
    .tll{
        background: yellow;
        height: 100px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
    }

    .tllH{
        background: green;
        height: 20px;
        width: 100%;
    }

    .tllC{
        background: magenta;
        height: 80px;
        width: 100%;
        display: none;
    }
</style>

Upvotes: 0

Views: 9263

Answers (3)

ram_c
ram_c

Reputation: 87

Setting .tll{height: auto} fixed the issue!

Upvotes: 1

Hamza Dhamiya
Hamza Dhamiya

Reputation: 1287

This is because the height of main container is fixed,The solution is present in this fiddle.

Upvotes: 1

Gohn67
Gohn67

Reputation: 10638

For .tll, you set a height of 100px.

.tllH is only 20px and coincidentally .tllC is 80px.

Upvotes: 1

Related Questions