CODEWITHSUNDEEP
htmlcssheight
Joshua
Joshua

Reputation: 1270

Setting multiple divs by height percent to fill parent div

I have a parent div with a max height/width set. I was wondering if it's possible to set the two child divs to automatically adjust their height based on a percentage using just CSS?

HTML:

<div id="parent">
    <div id="top"></div>
    <div id="bottom"></div>
</div>

CSS:

html, body {
    height: 100%;
    width: 100%:
}    

#parent {
    max-width: 400px;
    max-height: 600px;
}

#top {
    height: 30%;
}

#bottom {
    height: 70%;
}

The intended implementation of this would be for a mobile display that fills the screen height proportionally without forcing a vertical scroll.

EDIT: I now realize that height percentages of the parent will work if you have a fixed parent height. The question still stands as to whether there is a way just using CSS to allow for a flexible height that matches the screen size. It's seems like this will not be possible only using CSS and require JS intervention.

Upvotes: 2

Views: 11034

Answers (2)

Alexander Mistakidis
Alexander Mistakidis

Reputation: 3130

Theres nothing wrong with your code. Just adding a 100% height as well as width to the divs yields what you want. The max-width/height doesn't force any values (leaves height/width at auto). Here is a working fiddle:

http://jsfiddle.net/b6HVa/

#parent {
  width: 100%;
  height: 100%;
  max-height: 600px;
  max-witdh: 400px;
}

Upvotes: 5

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

I think you are doing right, if anything going wrong, please show a demo. Or try to set

#top{max-height: 30%;}
#bottom{max-height: 70%;}

Or add min-height: {some value}px; to your div.

Upvotes: 0

Related Questions