Make center div take remaining screen with bottom div taking as much space as needed

Question

This is somewhat related to this question but I'm trying to achieve this when the div is aligned vertically.

More or less, this is what I'm trying to achieve:

Main Div: Take the rest of the screen

Footer Div: Take as much space as needed

The css for float:bottom isn't available, so I'd like to hear some alternatives.

Here's what I have at the moment:

<div id="main_div" style="height:100%;overflow:scroll">
...Contents
</div>

<div id="footer_div" style="height:50px">
...Contents
</div>

Footer shows below main_div and the user has to scroll down to see it, instead of main_div adjusting itself to take just enough screen height to prevent the scrollbar to show up.

Why not you use `position absolute`. Both the `divs` give position absolute. Let me know? — The Mechanic, Feb 20 '13 at 05:34
@Sarfaraz I'm not sure if I understood you correctly, but you are asking me to set the position as absolute in both divs, right? Doing so hides the footer div. — l46kok, Feb 20 '13 at 05:48
what am understand by your question let me make a fiddle and show it to you give me 5 mins. — The Mechanic, Feb 20 '13 at 05:51
http://jsfiddle.net/sarfarazdesigner/3fLca/ check this fiddle — The Mechanic, Feb 20 '13 at 05:57

score 1 · Answer 1 · answered Feb 20 '13 at 05:56

1

you can check this fiddle http://jsfiddle.net/sarfarazdesigner/3fLca/

let me know am understand right or wrong? because what i have done what i understood by your question.

#main_div{
    position:absolute;
    left:0;
    right:0;
    top:0;
    bottom:50px;
    overflow:auto;
    background:#eee;
}
#footer_div{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    background:#ddd;
    height:50px;
}

answered Feb 20 '13 at 05:56

The Mechanic

1,921
1
24
35

1

YES!! Worked perfectly. Thank you so much. – l46kok Feb 20 '13 at 06:02
Wait, this doesn't work on IE 9. I've created a minimal example demonstrating this http://www.mediafire.com/view/?pv4upua28a70m58. – l46kok Feb 20 '13 at 06:23
yes you are right that is not working in ie9 sorry for inconvenience i have not test it in other browser let me check this give me some time thanks – The Mechanic Feb 20 '13 at 07:36
No problem, take your time. Thanks a lot for trying to help. – l46kok Feb 20 '13 at 07:40

Nick Pickering · Answer 2 · 2013-02-20T05:53:02.420

0

You can set the footer a fixed position at the bottom of the page. Any overlapping content will scroll behind it.

<html>
    <head>
    </head>
    <body>
        <div class="wrapper" style="width: 100%; border:1px solid blue;"> 
            <p>Your website content here.</p>
            <p>Your website content here.</p>
            <p>Your website content here.</p>
            <div class="push"></div>
        </div>
        <div class="footer" style="width: 100%; position:fixed; left:0; bottom: 0; border:1px solid red;">
            <p>FOOTER CONTENT HERE</p>
        </div>
    </body>
</html>

edited Feb 20 '13 at 05:53

answered Feb 20 '13 at 05:12

Nick Pickering

2,959
3
28
48

This is what I thought too, but it doesn't work for some reason. Please see my edit. – l46kok Feb 20 '13 at 05:18
Tried, but still the problem is there. – l46kok Feb 20 '13 at 05:22
Your edit fixes the footer in position correctly, but when the main div makes a scrollbar, the content gets overlapped with the footer, making it look quite dirty. – l46kok Feb 20 '13 at 06:37

Make center div take remaining screen with bottom div taking as much space as needed

Main Div: Take the rest of the screen

Footer Div: Take as much space as needed

2 Answers2