DarkxPunk Posted November 10, 2013 Share Posted November 10, 2013 (edited) Hey everyone... So I am trying to create a site that has a header stuck to the top at 100% width and 50px height, a footer stuck at the bottom at 100% width and 50px height, and a div in between that fills up the remaining space. Now so far I got this: HTML: <!DOCTYPE html><html> <head> <title>New Concept</title> <link rel="stylesheet" href="css/default2.css" title="Default" type="text/css" media="screen" charset="utf-8"> </head> <body> <div id="pageWrap"> <div id="header"></div> <div id="contentWrap">Content </div> <div class="push"></div> </div> <div id="footer"></div> </body></html> CSS: html,body { margin: 0; border: 0; padding: 0; width: 100%; height: 100%;}#pageWrap { min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -50px; position: relative;}#header { width: 100%; height: 50px; background-color: black;}#contentWrap { margin: 50px 0 0; min-width: 700px; width: 100%; height: 100%; position: absolute; top: 0; bottom: 0;}.push,#footer { height: 50px;}#footer { width: 100%; background-color: black;} Now I can't seem to get the middle div to just fill in the space, no negative margins, padding, nothing seems to get it to fit... Any ideas? Also I would like it to be relative, not fixed. This is probably simple, but I can't seem to click. Thanks for any help. Edited November 10, 2013 by DarkxPunk Link to comment Share on other sites More sharing options...
dsonesuk Posted November 10, 2013 Share Posted November 10, 2013 (edited) Look up sticky footer, the html, body height must be set at 100%, the outer container element should use min-height: 100%; the header MUST be within the outer container element, if not, its height will screw up the measurement required for correct height of outer container and positioning of footer, the footer is given a minus top margin matching its height. and is placed OUTSIDE of the outer container element at the bottom . Just noticed code <!DOCTYPE html><html> <head> <title>New Concept</title> <link rel="stylesheet" href="css/default2.css" title="Default" type="text/css" media="screen" charset="utf-8"> <style type="text/css"> html,body { margin: 0; border: 0; padding: 0; /*width: 100%;*/ height: 100%; } #pageWrap { min-height: 100%; /*height: auto !important; height: 100%; margin: 0 auto -50px; position: relative;*/ } #header { /*width: 100%;*/ height: 50px; background-color: black; } #contentWrap { margin: 0; min-width: 700px; /* width: 100%; height: 100%; position: absolute; top: 0; bottom: 0;*/ } .push,#footer { height: 50px; } #footer { /*width: 100%;*/ margin-top:-50px; background-color: black; } </style> </head> <body> <div id="pageWrap"> <div id="header"></div> <div id="contentWrap">Content </div> <div class="push"></div> </div> <div id="footer"></div> </body></html> Only the outside container will give true 100% height, any element within that, given a 100% height, just won't work. Edited November 10, 2013 by dsonesuk Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now