CODEWITHSUNDEEP
csshtml
TtT23
TtT23

Reputation: 7030

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

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.

Upvotes: 0

Views: 246

Answers (2)

The Mechanic
The Mechanic

Reputation: 2329

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;
}

Upvotes: 1

Nick Pickering
Nick Pickering

Reputation: 3185

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>

Upvotes: 0

Related Questions