javascript - Footer Only sticks to bottom of SCREEN not content -
this question has answer here:
i start saying, posting because response on website not @ regarding topic, solutions given i've tried , have not worked. (if have missed 1 apologize)
link: nova.it.rit.edu/~whateverokay/index.php
i have tried:
making wrapper position relative , adding padding bottom not help. making footer position absolute, not help. goes bottom of screen not content. , therefore covers bunch of content.
i have read these:
matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page
wordpress.org/support/topic/fixed-footer-covering-content
webdeveloper.com/forum/showthread.php?202513-position-footer-at-bottom-regardless-of-content-height
any question related on website.
and few others cannot recall , yes sticky footer of sites linked (cssstickyfooter.com/)
basic structure:
<div id="mainhead"> other divs hold header </div> <div id="wrapper"> <div id="content"> content here </div> </div> <div id="footer"> <footer> content here </footer> </div>
css:
#wrapper{ position:relative; min-height:100%; height:100%; padding-bottom:0px 0px 100px; } #content{ width:60%; position:relative; padding:10px; } #content, footer{ margin-left:auto; margin-right:auto; } #footer{ font-size:9pt; font-style:italic; text-align:center; overflow:auto; height:100px; position:absolute; bottom:0px; width:100%; margin-top:50px; border-top:4px solid #35475f; background-color:#35475f; clear:both; } footer{ width:60%; }
yes of may unnecessary, i've been trying everything. what cannot use: jquery position fixed not work because covers content. furthermore needs @ end of content.
this school project. have restrictions. must ie8 compatible. javascript okay, if knows solution that.
create div called "container" @ top, add footer div end of it
<div id="container"> <div id="mainhead"> other divs hold header </div> <div id="wrapper"> <div id="content"> content here </div> </div> <div id="footer"> <footer> content here </footer> </div> </div>
oh yeah, , rid of css junk (almost everything)
Comments
Post a Comment