div fill remaining height css

Question

I have this code:
HTML:

<body>
<div id="menu">  
menu elements...  
</div>  
<div id="main">  
Main website content...  
</div>
</body>

CSS:

body{background-color:CCCCFF;}
div#menu{background-color:#000000;display:table;height:45px;}
div#main{background-color:#FFFFFF;border-radius:10px;margin:10px;}

The menu div is a horizontal menu bar.
I want the main div fill the whole page (except the menu). Also when it is needed it should fill more space (example: if it has a lot of content). I don't want to use any javascript or the calc() method of CSS.
Is it possible to do what I want?
Thank you for your time!

possible duplicate of [Make a div fill the height of the remaining screen space](http://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space) — Yehuda Shapira, Mar 05 '14 at 06:54

BaBL86 · Answer 1 · 2013-12-12T05:02:59.390

0

Yes, you can add to your CSS:

html, body {
    height: 100%;
}

and than your div will correctly use height attribute with %. You can add bottom, left, right, top attributes:

div#main {
    position: absolute;
    overflow: auto;
    bottom: 5px;
    top: 50px;
    left: 5px;
    right: 5px;
}

check margins and paddings.

If you can use javascript, that's may be interesting to use

height: auto;
max-height: 300px; /*calculated value on resize and load*/

edited Dec 12 '13 at 05:02

answered Dec 10 '13 at 21:22

BaBL86

2,602
1
14
13

It works only if the content of div#main isn't very much. But when its content needs more space than a screen the content is out of the white area of div#main. – George Vidalakis Dec 10 '13 at 21:30
Use overflow: auto. Or you need to use javascript. You have to use height:auto and min-height. But without js or expression you don't know it value. – BaBL86 Dec 10 '13 at 21:37
I had to add "position:absolute" for div#main. Bottom, top, left and right in combination with overflow work good, but that isn't what excactly I am looking for. I will wait for better answers, but if they don't come and what I want to do is impossible I will change the question and I will vote you up. Thank you! – George Vidalakis Dec 10 '13 at 21:59
Why are you need to fill full document space? if it's about background, for example - use background property for body. Describe me your case more detail. – BaBL86 Dec 10 '13 at 22:07
It is more about the style of the webpage. I can't use the background property cause there are colors and shapes. Also if I use the css3 properties background-image,size,etc the shapes (border-radius in css) will not be good displayed. Here is a temporary-only example of your overflow suggestion: http://srn.netau.net/ . – George Vidalakis Dec 10 '13 at 22:20
Edit your answer. Write your overflow suggestion and I will select your answer. – George Vidalakis Dec 11 '13 at 21:25

div fill remaining height css

1 Answers1