eiranix Posted July 9, 2014 Share Posted July 9, 2014 I have a header and a footer that is 100% width. The footer sticks to the bottom when there is a high screen resolution. The Content area is a fixed width and I would like to have it extend down to the footer on large screens even if the content is short, how can I achieve this? Link to comment Share on other sites More sharing options...
dsonesuk Posted July 9, 2014 Share Posted July 9, 2014 The content area does not extend to footer, it just gives that impression, its the outermost container giving min-height: 100%; (with htm, body having height:100%; ) that fills the whole viewport/browser screen. The footer is placed under this, which is out of view, until you use minus top margin that matches the height of footer, the content area is then giving a padding at bottom that also matches the footer height, which prevents any text going under the footer. If the footer and header are block elements, you do not have to set 100% width, they do this by default, matching the width available to them. Link to comment Share on other sites More sharing options...
eiranix Posted July 10, 2014 Author Share Posted July 10, 2014 Sorry, to be more specific - I'm not using the html footer tag. I am trying to use a div as the footer for better support. Can you explain what I need to add to make the content div always extend down to the footer? html looks like this: <div id="container"> <div id="header"></div> <div id="content"></div> <div id="footer"></div></div> Css: html, body { margin:0; height:100%;}#container { position:relative; min-height:100%;}#content { position:relative; width:960px; min-height:800px; margin:0 auto;}#footer { position: absolute; height:40px; bottom:0px;} Link to comment Share on other sites More sharing options...
dsonesuk Posted July 10, 2014 Share Posted July 10, 2014 (edited) It does not matter if div or footer tag the principle is the same. <div id="container"><div id="header"></div><div id="content"></div> </div><!-- END of container - this will always match height of browser window until content exceeds this height --><div id="footer"><p>by using minus top margin matching the height of footer this will always show at bottom of outer container whose bottom edge will match the bottom edge of browser window until content exceeds this</p></div> html, body {margin:0;height:100%;}#container {/* position:relative; removed by dsonesuk */min-height:100%;}#content {/* position:relative; removed by dsonesuk */width:960px;/*min-height:800px; removed by dsonesuk as it could interfere with small screens causing scrollbars to appear. */margin:0 auto;padding-bottom: 40px; /* added by dsonesuk */}#footer {/*position: absolute; removed by dsonesuk */height:40px;/*bottom:0px; removed by dsonesuk */margin-top: -40px; /* added by dsonesuk */} Edited July 10, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
eiranix Posted July 10, 2014 Author Share Posted July 10, 2014 (edited) Thanks for the explaination, I see what you mean. It makes a nice sticky footer but it still doesn't make the content div full height... I have added more to your verison and made it -almost- work how I intended. The problem with this is the content div does not expand to fit it's contents <body><div id="container"> <div id="header"></div> <div id="content"><div id="inner-content"><p>Test</p></div></div></div><div id="footer"></div> html, body { margin:0; height:100%;}#container { height:100%;}#header { position:relative; background-color:green; height:100px; z-index:1;}#content { position:relative; overflow:auto; /* stops the bottom overflow */ height:100%; width:960px; margin:0 auto; background-color:red; margin-top:-100px;}#footer { position:relative; height:40px; margin-top: -40px; background-color:blue;}#inner-content { margin:100px 0 40px 0;} Edited July 11, 2014 by eiranix Link to comment Share on other sites More sharing options...
eiranix Posted July 11, 2014 Author Share Posted July 11, 2014 Ok I have come up with a working solution using display:table. Is this a valid/supported way to do it? Has anyone got a better way to do it? (maybe with less divs involved?) <div id="container"> <div id="top"><div id="header"></div></div> <div id="middle-row"> <div id="middle-cell"> <div id="content"> <p> Test </p> </div> </div> </div> <div id="bottom"><div id="footer"></div></div></div> html, body { margin:0; height:100%;}#container { width:100%; height:100%; display:table;}#top { height:100px; display:table-row;}#header { background-color:green; display:table-cell;}#middle-row { display:table-row;}#middle-cell { display:table-cell; height:100%;}#content { height:100%; max-width:940px; padding:10px; margin:0 auto; background-color:red;}#bottom { display:table-row; height:40px;}#footer { display:table-cell; background-color:blue;} Link to comment Share on other sites More sharing options...
dsonesuk Posted July 12, 2014 Share Posted July 12, 2014 I knew you was going to have problems using height: 100%; for content area, cause i knew it would stay to height of browser window and NOT extend with content. In these situations you have to use a bit of subterfuge and give the impression that the content area extends to footer, by using a element or in this case a adding empty ("") space after inner-content that uses position absolute, then you make it so it fills the area between header and footer using top: and bottom: properties. <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Document Title</title> <style type="text/css"> html, body { margin:0; height:100%; } #container { min-height:100%; position:relative; } #container, #container > *, #container ~ * {position:relative; z-index: auto;} #header { background-color:green; height:100px; } #content, #content div:after { position:static; width:960px; margin:0 auto; background-color:red; } #content div:after {content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; } #footer { height:40px; margin-top: -40px; background-color:blue; } #inner-content { padding-bottom: 40px; overflow:hidden; } </style> </head> <body> <div id="container"> <div id="header"></div> <div id="content"><div id="inner-content"><p>First Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Test</p><p>Last Test</p></div></div> </div> <div id="footer"></div> </body></html> Using content: means it wont work for older browsers ie IE but as i said you can add and use a element instead, and use styling used for '#content div:after' Link to comment Share on other sites More sharing options...
eiranix Posted July 12, 2014 Author Share Posted July 12, 2014 (edited) Ah, thats an interesting way to do it, thanks for the insight A couple of questions: Does an absolute item always position its left to a static parent's left as long as there is no left/right value set for it? Is there any reason you write #content div:after instead of just #content:after? Edited July 12, 2014 by eiranix Link to comment Share on other sites More sharing options...
dsonesuk Posted July 12, 2014 Share Posted July 12, 2014 1) Its something i discovered, if you don't set top:, right: left: bottom it vertically usually, but not always depending on browser, position itself close to where you inserted it, left of the parent container, but! in all browsers this is not a problem here as you use top:, bottom: anyway to set these edges positioning. 2) no, that will work as well. 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