rockinaway Posted September 8, 2011 Share Posted September 8, 2011 etcworld.co.uk/od3 if you go there, you can see the issue i am having. basically, I want the footer to stick to the bottom of the page and the header to stay up there. the div inside (which is of a smaller width) should be fluid and change height based on content. HOWEVER if the content doesn't fit the window, i still want this div to stretch for the full page. i've tried a few things, and the current one means it stretches the length of the entire window even though i have a header and footer. i just want it to stretch between these two areas.. any ideas? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 8, 2011 Share Posted September 8, 2011 Read an article of ryan fait on the sticky footer. http://ryanfait.com/sticky-footer/ Pay attention to the use of min-height on the wrapper in that article. Quote Link to comment Share on other sites More sharing options...
rockinaway Posted September 8, 2011 Author Share Posted September 8, 2011 how strange haha, that is the article i used to get to where i am.. i have used the min-height as describe there.. not sure what to do now :s .. my situation is slightly more complex with the header and footer :/ Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 8, 2011 Share Posted September 8, 2011 Well although my psychic powers know you read that article. What I can't do is guess what your setup is. If you have a link to your work it would help a lot. Quote Link to comment Share on other sites More sharing options...
rockinaway Posted September 8, 2011 Author Share Posted September 8, 2011 etcworld.co.uk/od3 i had placed it in the first post too Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 8, 2011 Share Posted September 8, 2011 etcworld.co.uk/od3 i had placed it in the first post too lol ok didn't see that, i'll have a look (it wasn't blue ) I see you read it the article but missed a little point. The min-height of 100% is meant to stretch the page to the very bottom. But Because you added extra margin at the top of #page the height of this element becomes 100% + that margin-top so that is more than 100% thus making your page always scroll. What you could do - instead of placing you header and nav outside #page and positoned absolute - is just place them inside of the #page with a normal position. That way the height of #page is 100% (if you remove that margin-top) Quote Link to comment Share on other sites More sharing options...
rockinaway Posted September 8, 2011 Author Share Posted September 8, 2011 thanks Quote Link to comment Share on other sites More sharing options...
rockinaway Posted September 8, 2011 Author Share Posted September 8, 2011 i tried that, but if you check it now, the header and nav no longer stretch the whole width of the page. i can't figure out how to get that to happen with the new setup :s Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 8, 2011 Share Posted September 8, 2011 that is pretty easy really Make an extra wrapper outside #page and place your #header and #nav in there so those get that width of 100% Set the min-height of 100% on this outer wrapper. Could look like this <body> <div id="outerwrapper"> <div id="header"></div> <div id="nav"></div> <div id="page"> </div> <div id="push"></div> </div> <div id="footer"></div> </body> Make sure you remove that top margin you have now though otherwise it doesn't matter what you do Quote Link to comment Share on other sites More sharing options...
rockinaway Posted September 8, 2011 Author Share Posted September 8, 2011 so set the min-height:100% in the outer wrapper class? Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 8, 2011 Share Posted September 8, 2011 have a look at this <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head><meta charset="UTF-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link rel="icon" type="image/x-icon" href="favicon.ico"/> <title>example</title> <style type="text/css"> body,html{height:100%;margin:0; padding:0} #outerwrapper{min-height:100%;background:yellowgreen} /* outer wrapper is the 100% one, rest inside has a normal position */ #header{height:100px;background:green} #nav{height: 40px; background:#333} #page{width:960px;margin: 0 auto} /* special width and centering*/ #push,#footer{height:50px;} #footer{margin-top:-50px;background:#999} </style> </head> <body> <div id="outerwrapper"> <div id="header"></div> <div id="nav"></div> <div id="page"> </div> <div id="push"></div> </div> <div id="footer"></div> </body> </html> test it out Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 8, 2011 Share Posted September 8, 2011 just incase you want to have the visual effect as if #page stretches to the bottom, we use something sneaky for that. Which is the following. I added an image for it and the additional code, run that as see what happens. Although #page doesn't stretch to the bottom but outerwrapper does, The visual effect is the same. I forgot the name of this technique but it's common practise code: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head><meta charset="UTF-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link rel="icon" type="image/x-icon" href="favicon.ico"/> <title>example</title> <style type="text/css"> body,html{height:100%;margin:0; padding:0} #outerwrapper{min-height:100%;background:yellowgreen url(back.png) repeat-y 50%} /*notice the 50% */ #header{height:100px;background:green} #nav{height: 40px; background:#333} #page{width:960px;margin: 0 auto; background:olive} #push,#footer{height:50px;} #footer{margin-top:-50px;background:#999} </style> </head> <body> <div id="outerwrapper"> <div id="header"></div> <div id="nav"></div> <div id="page"> </div> <div id="push"></div> </div> <div id="footer"></div> </body> </html> You could even use a data url in case you don't want an extra header request. Anyway this is how I would do it . [attachment deleted by admin] Quote Link to comment Share on other sites More sharing options...
rockinaway Posted September 8, 2011 Author Share Posted September 8, 2011 oh i see.. so really i just created an image to extend down. i'll try that tomorrow and get back too you with the results, thanks! Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 8, 2011 Share Posted September 8, 2011 oh i see.. so really i just created an image to extend down. i'll try that tomorrow and get back too you with the results, thanks! yep that's how. that way it looks like your stretching it, very sneaky And if you can't use it which i doubt it's worth knowing of it Quote Link to comment Share on other sites More sharing options...
rockinaway Posted September 8, 2011 Author Share Posted September 8, 2011 i just tried it, but the issue is, the middle bit has a smaller width than the header and footer. i can't create an image easily because the amount of empty space either side will change based of screen size.. so how can i create the effect that the page bit stretches to the bottom without an image? (my primary aim) Quote Link to comment Share on other sites More sharing options...
rockinaway Posted September 8, 2011 Author Share Posted September 8, 2011 my bad! missed the 50% width.. how do i get that to match the width of the #page? as with % it's fluid.. while #page isnt.. Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 8, 2011 Share Posted September 8, 2011 i just tried it, but the issue is, the middle bit has a smaller width than the header and footer. i can't create an image easily because the amount of empty space either side will change based of screen size.. so how can i create the effect that the page bit stretches to the bottom without an image? (my primary aim) Than you just do the opposite of the sticky footer: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head><meta charset="UTF-8" /> <link type="text/css" rel="stylesheet" href="css/style.css" /> <link rel="icon" type="image/x-icon" href="favicon.ico"/> <title>example</title> <style type="text/css"> body,html{height:100%;margin:0; padding:0} #header{height:140px;background:green; margin-bottom:-140px; position:relative;} #nav{height: 40px; background:#333; position: relative; bottom:-100px;left:0; } #toppush{height:140px;} /* combined height of the header and nav */ #page{height:100%;width:960px;margin: 0 auto; background:orange} #push,#footer{height:50px;} #footer{margin-top:-50px;background:#999} </style> </head> <body> <div id="header"> <div id="nav"></div> </div> <div id="page"> <div id="toppush"></div> <div id="content"> Your content goes here </div> <div id="push"></div> </div> <div id="footer"></div> </body> </html> Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 8, 2011 Share Posted September 8, 2011 my bad! missed the 50% width.. how do i get that to match the width of the #page? as with % it's fluid.. while #page isnt.. The % is the position. the image that got loaded has 960px width. The same as page. If you have a #page with of 40px you make the image 40px width -edit so the % has nothing to do with the width. Quote Link to comment Share on other sites More sharing options...
rockinaway Posted September 8, 2011 Author Share Posted September 8, 2011 check it.. im back to square one :/ when trying your new code.. guess i'll just have to use the image technique :/ Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 8, 2011 Share Posted September 8, 2011 check it.. im back to square one :/ when trying your new code.. guess i'll just have to use the image technique :/ The last 2 codes i provided are 2 different techniques. I update 1 of them so , maybe try them out when you fully rested or something. Just run it as is, before you implement it in your own code. so you see how it works. They both just work, so before you post make sure you tested it and understand what is happening. Quote Link to comment Share on other sites More sharing options...
rockinaway Posted September 8, 2011 Author Share Posted September 8, 2011 yeah you're right haha.. half asleep.. i'll try it tomorrow and get back to you Quote Link to comment Share on other sites More sharing options...
cssfreakie Posted September 8, 2011 Share Posted September 8, 2011 yeah you're right haha.. half asleep.. i'll try it tomorrow and get back to you make sure you copy the code than, so your certain you have the most updated ones. Also just using good old pen and paper to work out the rough dimensions can be very useful to get a hold of this stuff. Quote Link to comment Share on other sites More sharing options...
rockinaway Posted September 9, 2011 Author Share Posted September 9, 2011 right im back with results.. etcworld.co.uk/od3 as you can see it works on pages with no text, however if there is too much text (as on the index page) the footer stays where it is although the page extends.. and also the text is hidden under the header on all pages :s Quote Link to comment Share on other sites More sharing options...
rockinaway Posted September 9, 2011 Author Share Posted September 9, 2011 okay the text being hidden has been sorted.. but the fact the footer stays the same hasn't :s Quote Link to comment Share on other sites More sharing options...
rockinaway Posted September 9, 2011 Author Share Posted September 9, 2011 managed to figure out a workaround that seems to be working at the moment, thanks for all the help Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.