css - <body> and <html> height and layout trouble -


i've got 2 pages, page has lot of content , requires scrolling down, , page b has little content , takes half browser window. i'm trying stick footer down @ bottom of both pages, regardless of size of content.

here i've been trying do. i've 2 containers inside body, 1 footer , 1 else, call main-wrapper. i've put borders aroudn wrappers , body see wheree take up. main wrapper take content on page a, on page b sit around actual content, it's bottom-border half way down page, though body body takes full screen. i've set main-warpper height 100% why won't take uo full body???

this how approach situation. sounds need set min-height on main-wrapper instead of having it's height set 100% of filling container. due screen sizes varying user user, you'll need use little javascript/jquery try , calculate page height. try this

$(document).ready(function() {    var pageheight = $("body").height();    pageheight -= 200; // whatever height of footer is. make sure subtract out    $("#main-wrapper").css("min-height", pageheight + "px"); }); 

Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -