javascript - How to expand div to cover remaining page height -
sorry, searching has returned tons of results, nothing matches problem exactly. seems drowning in div-height problems. :-(
i have following test layout:
<!doctype html> <html> <head> <title>div test</title> <style type="text/css" media="screen"> body { margin:0; } div { width:100%; } .content { position:relative; float:none; margin-left:auto; margin-right:auto; display:block; width:680px; } #one { height:100px; position:relative; background-color:#0000ff; } #two { position:relative; background-color:#00ff00; height:100%; min-height:400px; } #three { height:70px; background-color:#ff0000; bottom:0; position:absolute; } #oneone { height:100%; background-color:#838383; } #twotwo { height:400px; background-color:#eeff47; } #threethree { height:100%; background-color:#400080; } </style> </head> <body> <div id="one"> <div class="content" id="oneone"></div> </div> <div id="two"> <div class="content" id="twotwo">expand bottom.</div> </div> <div id="three"> <div class="content" id="threethree"></div> </div> </body> </html> i want div 1 , 3 stay in top , bottom, div twotwo should expand in height accommodate pagecontent, , expand when content more page height, therefore pushing div 3 down , cause scrolling.
is possible without javascript? if so, what's css solution this? thanks!
javascript needed this. when have header , footer height , want middle have 100% height, result full page height + header height + footer height. you'll end scroll bars view entire page. if want fit in same window, need use javascript detect how middle space left , assign height accordingly.
to detect middle height jquery, can do
var 1 = $('#one').height(), 3 = $('#three').height(), 2 = parseint($(window).height() - 3 - one); alert(two); this give height left middle part <div id="two"> in case.
see jquery code in action @ http://jsfiddle.net/ppw5y/. notice when expand window , run code again, have different content height.
Comments
Post a Comment