CODEWITHSUNDEEP
htmlcss
Ronaldo
Ronaldo

Reputation: 367

split div in two taking all available vertical space

I'm trying to split a div in two side by side divs. I know that has several examples here, but I already searched and not found one that permit that the divs take all available space in vertical, without any content.

Take a look http://jsfiddle.net/kpDDM/3/

Upvotes: 4

Views: 3296

Answers (3)

Oliver Tappin
Oliver Tappin

Reputation: 2541

Add   within your div tags. Because they're 100% rather than fixed pixels, they need something inside to make them visible.

If you want to make the div tags 100% of the page, then you need to state the page is 100% (so the div tags understand what 100% is).

* { height:100%; }

Changing the body and html tags to 100% is not necessary.

Upvotes: 3

Daniel Li
Daniel Li

Reputation: 15379

Your parent divider takes a %height even though it's parent container, body, does not have an explicit height amount. This infers that your parent divider overrides with height:auto instead, leaving you without the height you wish.

You'll need to declare a fixed height for parent if you wish for this to work. Modern browsers today do not support default explicit height amounts for the parent body.

Thus, you'll need to make sure you explicitly define your html and body dividers heights like so:

html, body {
    height:100%;
}

Enjoy and good luck!

Upvotes: 1

JSW189
JSW189

Reputation: 6325

To set a percentage height to your divs, their parent element must have a specific height. In this case it appears you want it based on the viewport height. To achieve this, every ancestor div must have a height of 100%:

*, html, body, .parent {
    height: 100%;
}

JS Fiddle: http://jsfiddle.net/kpDDM/6/

Upvotes: 7

Related Questions