CODEWITHSUNDEEP
htmlcss
user163365
user163365

Reputation: 1327

CSS: 2 DIVs, one takes a fixed size, other one fills up the remaining space

I have 2 DIVs, one containing a map, this one is above the other one. It should take all space available, except for the footer, which is 25px high.

Currently I give the map 95% of the height, and the footer 25px. Problem is when the windows gets really big, the footer becomes enormousness, and when the windows becomes really small, scroll bars kick in.

However, this is not what I want, I want:

#map { height: <window_height - footer_height> }
#footer { height: 25px }

How could I achieve this using only CSS and HTML?

PS. I know there probably are some simple javascript solutions, but for educations sake, I want to know how to do this without javascript.

Upvotes: 0

Views: 1346

Answers (1)

jfrej
jfrej

Reputation: 4648

Have a look at this: keeping footers at the bottom of the page

All the code is there. Basically you do this in your HTML:

<html><body>
<div id="container">
   <div id="map"></div>
   <div id="footer"></div>
</div>
</body></html>

And then in your CSS:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#map {
   padding:10px;
   padding-bottom:25px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:25px;   /* Height of the footer */
}

There are other ways to achieve this and similar effects. Let know if this is what you wanted.

Hope this helps.

Upvotes: 1

Related Questions