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
Post a Comment