How to make div take the sreen remaining height

Question

I want to expand the div tag to fit the mobile screen height

<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>

The header and footer do not have a fixed height value and I want to make the container fit the remaining screen height.

When I used:

html , body {height:100%;}
#cointainer{height:100%;}

I have to scroll to show the footer.

So I want the header and footer height:auto and the container take the remaining height.

Welcome to SO! This question sounds very much like questions that have appeared before. Look at the related questions to the right under "Related", for example, http://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space?rq=1 — Marc Audet, Apr 17 '13 at 15:11
Do you want the middle container to be scrollable? or it should be fixed height too? (though what then happens if you have too much content?) [Maybe this will help?](http://stackoverflow.com/questions/4069734/cross-browser-fixed-header-footer-and-scrollable-content) — musefan, Apr 17 '13 at 15:12
the page contains a little information so the footer appear in the middle of the page and the remaining page is empty it not seems good so i want to make the footer appear in the end of page and header in top and the containeer take the remaining height when I used #container {height:100%;} the caontaineer take more height than the screen height so i have to scroll to see the footer i want to fix this problem — Edward, Apr 17 '13 at 15:19
@Edward You mentioned that you want the footer to stay at the end of the page all the time even if the container has nothing in it, right? Maybe sticky footers can help you. — Arnelle Balane, Apr 17 '13 at 15:56

score 0 · Answer 1 · answered Apr 17 '13 at 16:05

0

well, you could do some math, take window height and sub the footer and header height, and that´ll be containers height. byeee.

answered Apr 17 '13 at 16:05

1 Answers1