CODEWITHSUNDEEP
htmlcss
Andrey Koltsov
Andrey Koltsov

Reputation: 1994

how to make div use 100% of available height?

I have next html:

<div class="left">
    <div style="margin: 32px 0;">
        <div class="border"></div>
    </div>
</div>

and css:

.left {
    position:absolute;
    background: red;
    height: 50%;
    width: 32px;
}
.border {
    background: green;
    height: 100%;
}

but I don't see green box :(

UPD: I want to see red squares over and under green box.
UPD2: height of green box should be red.height - 32px*2

Upvotes: 0

Views: 1066

Answers (3)

Krishanu Dey
Krishanu Dey

Reputation: 6406

Use min-height: 100%; in .border{...}. and add a class .middle { height: 100%; } and assign it to the parent div of .border{...} div.

Upvotes: 0

RoccoC5
RoccoC5

Reputation: 4213

The second div is not assigned a height, so the innermost div cannot be assigned a relative height. Try adding the following CSS rule:

.left div {
    height: 100%;
}

Or, assign explicit heights to the inner divs.

http://jsfiddle.net/B9z92/1/

Upvotes: 2

Ryan
Ryan

Reputation: 5682

Your problem is that you have 3 empty div's here and not one of them has a set height. So even if you do min-height: 100% its not going to work unless some outer container has a height that your not showing. You will need to put some content in there or give one of the 3 div's (assuming they are the only containers on the page) an actual height. Like .left{ height: #px; } (# = the height you want it to have). Otherwise the browser does not know how to render percentages because it has nothing to relate them too.

Div's are block level elements which means they will assume the size of content put in them but if there is no content in them they will assume a height of 0px by 0px.

http://jsfiddle.net/X6qkL/5/ updated

Upvotes: 2

Related Questions