CODEWITHSUNDEEP
htmlheightexpand
eng.ahmed
eng.ahmed

Reputation: 925

How to expand div height to bottom with css?

I have a div container in my html page and i want set its height to expand all remaining page in the screen..

How can i do that ??

That's my code :

HTML 

<div class="row">
       <div id="builder-container" class="col-xs-12 col-lg-9">                                    
             <div id="builder-content"  > </div>
       </div>
</div>

CSS

#builder-container {
    background-color: #ccc;
    height: 100%;
}

enter image description here

Upvotes: 4

Views: 13738

Answers (3)

CaptainKryuk
CaptainKryuk

Reputation: 1

html

<div class="row full_height">
    <h1>Test elem</h1>
</div>

css

.full_height {
    height: 100vh
}

Upvotes: 0

divy3993
divy3993

Reputation: 5810

Actually it would not get cover your whole page without enough content, but the best way is to give it 'position:absolute/fixed/relative' and give the same div top:whateveryouwant px; and bottom: 0px/0%; width and height :100%

JSFiddle - Edited: Check it now

CSS

    body
{
   margin:0;
   width:100%;
   height:100%;
}

    #builder-container {
        display:block;
        position:absolute;
        margin-top:5%;
        left:0%;
        bottom:0%;
        background-color: #ccc;
        height: 100%;
        width:100%;
    }

Upvotes: 0

Sam
Sam

Reputation: 1618

You have to give all of the parent elements, including the div you want to extend, a height of 100%.

Upvotes: 4

Related Questions