Ruddlesdin Posted March 15, 2014 Share Posted March 15, 2014 (edited) I have been googling sticky footer but whichever way I try to implement it, it doesn't seem to work. I have probably missed something really stupid knowing me Could you gurus kindly please take a look at my code and let me know where I have gone wrong please. Here's my fiddle: http://jsfiddle.net/Ruddlesdin/2N2Gb/ (The idea is to make main fill the gap between a fixed height header and footer which fills the whole browser window) <body id="body"> <div id="wrapper"> <div id="header"> <div id="headerLeft"></div> <div id="headerRight"></div> <div id="headerMiddle"></div> </div> <div id="main"></div> <div id="footer"></div> </div></body> #body{ height:100%;}#wrapper { min-height:100%; height:auto; position:relative; height:100%; width:100%; margin:0; padding:0;}#header { float: top; height: 50px; width: auto; background: orange;}#headerLeft { float: left; width: 100px; height: 100%; background: green;}#headerMiddle { height: 100%; background: red;}#headerRight { float:right; width: 100px; height: 100%; background: blue;}#main{ background:yellow; width: auto; padding-bottom:50px;}#footer { position:absolute; bottom:0; height: 50px; width: auto; background: pink;} Edited March 15, 2014 by Ruddlesdin Link to comment Share on other sites More sharing options...
dsonesuk Posted March 15, 2014 Share Posted March 15, 2014 You have to give html height of 100%, set the footer outside at the bottom of wrapper, don't use position: absolute; on footer. http://jsfiddle.net/2N2Gb/15/ Link to comment Share on other sites More sharing options...
Ruddlesdin Posted March 15, 2014 Author Share Posted March 15, 2014 I always try to figure out what I can first, then google and forums, but this had me stumped for a long time. Many thanks again to this great forum. Thanks dsonesuk. Aside, how can I get the "main" to occupy all the space between the header and the footer? If the main needs more space then it scrolls so footer always at bottom of viewable browser window? Will this need the use of some jquery? Thanks again. **_Paul_** Link to comment Share on other sites More sharing options...
scout1idf Posted March 16, 2014 Share Posted March 16, 2014 (edited) You could try it this way.......... <!DOCTYPE HTML><html><head> <title> </title> <style type="text/css"> /*<![CDATA[*/html, body{ height:100%; width:100%; margin:0px; padding:0px; background:#9aa;}#head{ width:95%; height:50px; border:5px solid #d2b48c; position:fixed; top:0px; left:2%; background:#d2b48c;}#headspaceleft{ width:29%; height:100%; background:red; display:inline-block; margin:0px; padding:0px;}#headspacemiddle{ width:41%; height:100%; background:white; display:inline-block; margin:0px; padding:0px;}#headspaceright{ width:29%; height:100%; background:blue; display:inline-block; margin:0px; padding:0px;}#wrap{ width:95%; min-height:100%; border:1px solid #d2b48c; margin:60px auto 60px auto; background:#7e6c54; padding:4px;}#foot{ width:95%; height:50px; border:5px solid #d2b48c; position:fixed; bottom:0px; left:2%; background:#d2b48c;} /*]]>*/ </style></head><body> <div id='head'> <div id='headspaceleft'> </div> <div id='headspacemiddle'> </div> <div id='headspaceright'> </div> </div> <div id='wrap'> Put your main content in this space...... </div> <div id='foot'> </div></body></html> A little different style, but it works for me...... Edited March 16, 2014 by scout1idf Link to comment Share on other sites More sharing options...
Ruddlesdin Posted March 16, 2014 Author Share Posted March 16, 2014 (edited) Thanks for all your help with this. Learning HTML5 has not been as simple as I first thought it would be. It is apparent that there are very specific combinations of style that need to be inserted, sometimes in the right order, and if you get just one of those wrong then the whole of what you are trying to achieve won't work. Great challenge though. With the help from the forum I have been able to achieve exactly the layout I was looking for. Here's my fiddle for anyone else interested in this layout. http://jsfiddle.net/Ruddlesdin/rrHru/4/ (And I name this layout "Paul's Layout" unless there is already a name for this layout) <body id="body"> <div id="wrapper"> <div id="header"> <div id="headerLeft">1</div> <div id="headerRight">3</div> <div id="headerMiddle">2</div> </div> <div id="main">4</div> </div> <div id="footer">5</div></body> body,html{ height:100%; margin:0; padding:0;}#wrapper { height:100%; position:relative; width:100%; margin:0; padding:0;}#header { height: 50px; width: auto; background: orange;}#headerLeft { float: left; width: 100px; height: 100%; background: green;}#headerMiddle { height: 100%; background: red;}#headerRight { float:right; width: 100px; height: 100%; background: blue;}#main{ background:yellow; width: auto; height:80%; /* Not sure where the figure 80% is calculated from but it worked for me ???? */}#footer {position:fixed;bottom:0px;height: 50px;width: 100%;background: pink;} Edited March 16, 2014 by Ruddlesdin Link to comment Share on other sites More sharing options...
dsonesuk Posted March 16, 2014 Share Posted March 16, 2014 Problems foreseen here, height 80% is from total height of html/body#wrapper using 100%, when you have fixed px height for header and footer, with different resolution screen heights this will produce larger or narrow result for #main container. IF you fill the #main with content, the last portion of the content will be hidden by footer. Link to comment Share on other sites More sharing options...
dsonesuk Posted March 16, 2014 Share Posted March 16, 2014 <!DOCTYPE HTML><html> <head> <title> </title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> /* SHOW MINIMUM TEXT/ MAX TEXT TOGGLE */ $(function() { $('#toggle_this').click(function() { if ($('#main p').eq(3).css('display') != 'none') { $('#main p:gt(2)').hide(); } else { $('#main p').show(); } }); }); </script> <style type="text/css"> body,html{ height:100%; margin:0; padding:0; } html { overflow-y: scroll; } #wrapper { background-color: #FFFF00; margin: 0; min-height: 100%; padding: 0; } #header { height: 50px; background: orange; /* FOR FIXED HEADER left: 0; position: fixed; right: 0; top: 0; */ } #headerLeft { float: left; width: 100px; height: 100%; background: green; } #headerMiddle { height: 100%; background: red; margin: 0 100px; } #headerRight { float:right; width: 100px; height: 100%; background: blue; } #main{ overflow: hidden; padding: 0 10px 50px; /*padding: 50px 10px; FOR FIXED HEADER */ } #footer { background: none repeat scroll 0 0 #FFC0CB; bottom: 0; height: 50px; left: 0; position: fixed; right: 0; } </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="headerLeft"></div> <div id="headerRight"></div> <div id="headerMiddle"><input id="toggle_this" type="button" value="Min Text/Max Text"></div> </div> <div id="main"> <p> Start content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here THE END </p></div> </div><div id="footer"></div> </body></html> Link to comment Share on other sites More sharing options...
Ruddlesdin Posted March 16, 2014 Author Share Posted March 16, 2014 Thank you dsonesuk, for spending the time on this. It shows that I have a lot to learn yet. I like what you have done and I will surely use this in the future. I did notice when I put this in fiddle that as I scrolled down the header moved off. What I would be looking for ideally is for the header and the footer to remain stuck to the top and bottom respectively. Once the main content fills over its visible space I would expect to see scroll bars on just the main container only. Can this be done with just css3 or does this need jquery? Link to comment Share on other sites More sharing options...
dsonesuk Posted March 17, 2014 Share Posted March 17, 2014 position: fixed; is used to fit to browser window, so define header, footer and set position main using top and bottom property, use overflow-y scroll to always show scrollbar whatever content, as this prevents content jumping left when you resize browser window forcing content height greater than its container height. Note: position: fixed is not supported well on many phone/hand held devices. <!DOCTYPE HTML><html> <head> <title> </title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> /* SHOW MINIMUM TEXT/ MAX TEXT TOGGLE */ $(function() { $('#toggle_this').click(function() { if ($('#main p').eq(3).css('display') != 'none') { $('#main p:gt(2)').hide(); } else { $('#main p').show(); } }); }); </script> <style type="text/css"> body,html{ height:100%; margin:0; padding:0; } html { /* overflow-y: scroll;*/ } #wrapper { background-color: #FFFF00; margin: 0; min-height: 100%; padding: 0; } #header { height: 50px; background: orange; /*FOR FIXED HEADER*/ left: 0; position: fixed; right: 0; top: 0; } #headerLeft { float: left; width: 100px; height: 100%; background: green; } #headerMiddle { height: 100%; background: red; margin: 0 100px; } #headerRight { float:right; width: 100px; height: 100%; background: blue; } #main{ position: fixed; top:50px; bottom: 50px; left:0; right:0; overflow-y: scroll; padding: 0 10px; /* padding: 0 10px 50px; padding: 50px 10px; FOR FIXED HEADER */ } #footer { background: none repeat scroll 0 0 #FFC0CB; bottom: 0; height: 50px; left: 0; position: fixed; right: 0; } </style> </head> <body> <div id="wrapper"> <div id="header"> <div id="headerLeft"></div> <div id="headerRight"></div> <div id="headerMiddle"><input id="toggle_this" type="button" value="Min Text/Max Text"></div> </div> <div id="main"> <p> Start content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here</p> <p> content here THE END </p></div> </div><div id="footer"></div> </body></html> Link to comment Share on other sites More sharing options...
Ruddlesdin Posted March 17, 2014 Author Share Posted March 17, 2014 (edited) Thanks again dsonesuk, Overflow y had done the trick. I noticed that the bottom of the scroll bar in main was behind my footer but changing the main height from '100%' to 'auto' moved the bottom of the scroll bar into the visible part. I can now resize my browser window and the header and footer stay put and the main window resizes automagically. I am aware that this thread has moved on from a sticky footer and that I should have started a new thread for the main container scroll bars. Here is the final (hopefully) fiddle for my layout: (Pauls Layout) http://jsfiddle.net/Ruddlesdin/rrHru/ Thanks to all involved. I couldn't have done it without you Thanks, **_Paul_** Edited March 17, 2014 by Ruddlesdin 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