CODEWITHSUNDEEP
csshtmlheight
Nathan Osman
Nathan Osman

Reputation: 73295

How to make a DIV take up the remainder of the page?

I have the following HTML:

<html>
<body>
  <h2>Title</h2>
  <div id='large_div'>
    blah.. blah.. blah..
  </div>
</body>
</html>

How can I make the large_div take up the rest of the page height?

Here is the CSS for the page:

html { height: 100%; }
body { height: 100%; }
#large_div {
    /* ??? */
}

Upvotes: 3

Views: 3048

Answers (4)

isildur4
isildur4

Reputation: 341

html,body {height:100%;border:0px;margin:0px;padding:0px;}

#large_div {height:100%;margin:0px;}

Upvotes: 0

manbeardpig
manbeardpig

Reputation: 469

If you knew the height of the top div (or h2 in this case), you might be able to try something like the following:

#topdiv { height:100px; }
#bottomdiv { height:100%; margin-bottom:-100px; bottom:0; }

Unfortunately, I can't test this from where I am right now, so this could be way off... But I believe I've used something similar to this before and it had a similar effect.

You may be able to find your solution - or at least a "good enough" solution, by playing around with those css properties...

Good luck!

Upvotes: 0

Pat
Pat

Reputation: 25685

You could try setting a negative margin on the #large_div that was equal to the height of the h2. Unfortunately this will not very solid code since that h2 height will change depending on text length and browser:

#large_div {
    height: 100%;
    margin-top: -1em; /* adjust to height of h2 */
}

A bit of jQuery would sort you out though:

$(document).ready(function(){
    $('#large_div').css({height: $(window).height() - $('h2').height()});
});

Upvotes: 2

BalusC
BalusC

Reputation: 1109695

So, you basically want a table layout? This is one of the nastiest things in CSS. You might consider to fall back to old fashioned HTML tables, but if you don't care about IE6/7 support, then you can also play around using display attributes of table, table-row and eventually table-cell.

Here's an SSCCE, copy'n'paste'n'run it.

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3323454</title>
        <style>
            html { 
                height: 100%;
            }
            body { 
                display: table; 
                margin: 0;
                width: 100%;
                height: 100%;
            }
            #large_div {
                display: table-row; 
                width: 100%;
                height: 100%;
                background: pink;
            }
        </style>
    </head>
    <body>
        <h2>Title</h2>
        <div id="large_div">blah.. blah.. blah..</div>
    </body>
</html>

Again, this works in decent CSS2-adhering browsers only.

If all you want to achieve is to give the div a nice background, then there are nicer solutions.

Upvotes: 1

Related Questions