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


i have following html:

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

how can make large_div take rest of page height?

here css page:

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

you try setting negative margin on #large_div equal height of h2. unfortunately not solid code since h2 height change depending on text length , browser:

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

a bit of jquery sort out though:

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

Comments

Popular posts from this blog

c++ - How do I get a multi line tooltip in MFC -

asp.net - In javascript how to find the height and width -

c# - DataTable to EnumerableRowCollection -