{"id":433,"date":"2008-07-28T06:29:00","date_gmt":"2008-07-28T06:29:00","guid":{"rendered":"https:\/\/chayilyam.com\/stories\/?p=433"},"modified":"2008-07-28T06:29:00","modified_gmt":"2008-07-28T06:29:00","slug":"100-height-model-css","status":"publish","type":"post","link":"https:\/\/chayilyam.com\/stories\/100-height-model-css\/","title":{"rendered":"100% height model css?"},"content":{"rendered":"<p>I had been looking around for a way to accomplish fixed header and footer on a website when scrolling, and somehow i haven&#8217;t got it right with background attachment: fixed, neither i got it with absolute position&#8230;<\/p>\n<p>I have a main Div called wrapper, inside there are three main Divs: header, content and footer, and each one of them has sub Divs inside for the content of each one. So the structure goes something like this in general terms:<\/p>\n<p>body[<\/p>\n<p>[ Div:wrapper<br \/>Div:Header<br \/>Div:top-banner<br \/>Div:Menu<br \/>Div:Buttons<br \/>]<br \/>[Div:Content]<\/p>\n<p>[Div:Footer<br \/>Div:bottom-banner<br \/>]<br \/>]<\/p>\n<p>is there any way to accomplish that the header and footer remain &#8220;locked&#8221; at the top and bottom of the browser window and only the content scrolls down.<\/p>\n<p><span style=\"font-weight: bold;\"> See Here is the proper solution: <\/span><\/p>\n<p>html, body {<br \/>height: 100%;<br \/>}<\/p>\n<p>body {<br \/>any other styles;<br \/>}<\/p>\n<p>#container {<br \/>min-height: 100%;<br \/>other styles;<br \/>}<br \/>* html #container {height: 100%;}\/*IE6*\/<\/p>\n<p>this way, your page start out 100% but can grow bigger as content demands.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I had been looking around for a way to accomplish fixed header and footer on a website when scrolling, and somehow i haven&#8217;t got it right with background attachment: fixed, neither i got it with absolute position&#8230; I have a main Div called wrapper, inside there are three main Divs: header, content and footer, and &hellip;<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_uf_show_specific_survey":0,"_uf_disable_surveys":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[81,83,84,183],"tags":[1627,1646,1349],"class_list":["post-433","post","type-post","status-publish","format-standard","hentry","category-css","category-css-principles","category-css-tags","category-help","tag-css","tag-help","tag-tutorial"],"aioseo_notices":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack-related-posts":[],"jetpack_shortlink":"https:\/\/wp.me\/pfoK1S-6Z","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts\/433","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/comments?post=433"}],"version-history":[{"count":0,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/posts\/433\/revisions"}],"wp:attachment":[{"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/media?parent=433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/categories?post=433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/chayilyam.com\/stories\/wp-json\/wp\/v2\/tags?post=433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}