How to make a DIV take up the remainder of the page?_问答_开发者

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

开发者 https://www.devze.com 2023-01-08 10:46 出处：网络

I have the following HTML: <html> <body> 开发者_开发问答<h2>Title</h2> <div id=\'large_div\'>

相关专题：css height

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 {
    /* ??? */
}

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

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.

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!

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

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

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

精彩评论

关注公众号

热门标签

图文推荐

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

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：