AndyMoireASP Posted September 23, 2009 Share Posted September 23, 2009 HiI have a problem with my sticky footer, which is hiding the bottom edge of my content area along with the scroll bar stopping me being able to scroll to the bottom of the content area. Trying to fix it, I added padding-bottom attribute to the content css, but this made no difference. So, I am really desperate need of help!Here is my mark up:<body><div id="fit"><div id="header">---header info goes here<div id="links">---links goes here</div><div id="timer">---clock goes here---</div></div><div id="content"><div id="menu">---menu goes here---</div>---content placeholder goes here---<div id="footer">---label goes here</div></div></body>CSS#body{width:100%;height:100%;top:0;right:0;left:0;bottom:0}#html{top:0;width:100%;overflow:hidden;}#header{top:0;width:100%;min-width:40em;position:relative;}#fit{ height:100%;}#footer{position:fixed;width:100%;min-width:40em;clear:both;}#content{overflow-y:scroll;overflow-x:hidden;height:100%;width:100%;} Link to comment Share on other sites More sharing options...
dsonesuk Posted September 23, 2009 Share Posted September 23, 2009 remove # from body and html for a start Link to comment Share on other sites More sharing options...
dsonesuk Posted September 23, 2009 Share Posted September 23, 2009 try belowbody { height: 100%; position: relative; }#footer {height:33px;position: fixed;bottom: 0px;min-width:40em;clear:both; } Link to comment Share on other sites More sharing options...
jlhaslip Posted September 24, 2009 Share Posted September 24, 2009 google ryan fait sticky footer Link to comment Share on other sites More sharing options...
dsonesuk Posted September 24, 2009 Share Posted September 24, 2009 <style type="text/css">body{height:100%;position:relative;}#header{top:0;width:100%;min-width:40em;position:relative;}#fit{ height:100%;position:relative;}#footer{position:fixed;width:100%;min-width:40em;background-color:#CCFFFF;bottom:0;left:0;}#content{padding-bottom:20px;}</style><div id="fit"><div id="header">---header info goes here<div id="links">---links goes here</div><div id="timer">---clock goes here---</div></div><div id="content"><div id="menu">---menu goes here---</div><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex.</p> <div id="footer">---label goes here</div></div></div> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.