62624

sticky footer floating in the page when resizing

Question:

I'm trying to make my footer stick to the bottom of the page . pages of my site is not at the same height . I tried every thing on the web but nothing worked when zoom in\out or resizing browser window it jambs with the browser and floats in the middle of my divs , tables , ..etc here's the original footer css :

#footer { width:100%; height:20px; vertical-align:middle; font-size:10px; font-weight:bold; } #footer ul { margin-top:10px; margin-right:10px; margin-left:30px; color: #797979; line-height:11px; } #footer ul li { float:left; border-right:1px solid #797979; list-style:none; margin:0 5px 5px 0; padding-right: 5px; } #footer ul li a { color: #797979; text-decoration:none; } #footer ul li a:hover { text-decoration:underline; } #footer .copyright { margin-top:5px; float:none; text-align:center; }

and html looks like :

<div id='main'> <div id='header'> </div> <form id='myform'> <div id='form_div'> </div> </form> <div id='footer'> </div> </div>

and here's all methods I've tried :

<a href="http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/" rel="nofollow">http://www.lwis.net/journal/2008/02/08/pure-css-sticky-footer/</a>

<a href="http://www.cssstickyfooter.com/" rel="nofollow">http://www.cssstickyfooter.com/</a>

<a href="http://alistapart.com/article/footers" rel="nofollow">http://alistapart.com/article/footers</a>

<a href="http://blog.softlayer.com/2012/tips-and-tricks-pure-css-sticky-footers/" rel="nofollow">http://blog.softlayer.com/2012/tips-and-tricks-pure-css-sticky-footers/</a>

and many others ...

I tried to put :

#footer { bottom:0; position: fixed }

it sticks with this but of course when resizing browser it's not seems there's a problem in css p.s : I'm not the one who wrote it I'm just using it and trying to fix it

Answer1:

Try Ryan Fait's <strong><a href="http://ryanfait.com/sticky-footer/" rel="nofollow">sticky footer</a></strong>. It's incredibly simple and cross-browser compatible.

Recommend

  • Change Font Style (bold, Italic, bold italic) in C# [duplicate]
  • How do one only submit click event (div), when using jquery live function?
  • What's the logic in HKObserverQuery background delivery?
  • TCPDF's getNumLines() is sometimes wrong
  • WP7 - read from CSV file? Or what to do with the data?
  • Play Framework nested form errors missing
  • Why does PHP appear to evaluate this condition incorrectly?
  • Multibinding Multiselection ListView
  • Custom Nav Title offset ios 11
  • IOS > Open URL in Safari with POST
  • Formatting a text in a table cell with PHPWord e.g. bold, font, size e.t.c
  • my tic-tac-toe program in matlab does not work [closed]
  • C# List of Panels
  • Understanding RTF and edit it with vb.net
  • Outlines on links in IE9 remains when focus is changed
  • Floated image with variable width and heading with background image
  • Adjust width of select element according to selected option's width
  • Installed module is empty
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Time complexity of a program which involves multiple variables
  • preg_replace Double Spaces to tab (\\t) at the beginning of a line
  • Custom validator control occupying space even though display set to dynamic
  • Listbox within Listbox and scrolling trouble in Windows Phone 7 Silverlight
  • Atlas images wrong size on iPad iOS 9
  • Disable Enter in editText android
  • Change multiple background-images with jQuery
  • Algorithm for a smudge tool?
  • Using jQuery closest() method with class selector
  • Android screen density dpi vs ppi
  • Can Jackson SerializationFeature be overridden per field or class?
  • How to draw moving and Running sine wave chart using JFree chart in java?
  • Why doesn't :active or :focus work on text links in webkit? (safari & chrome)
  • DirectX11 ClearRenderTargetViewback with transparent buffer?
  • How to check if every primary key value is being referenced as foreign key in another table
  • Change an a tag attribute in JavaScript based on screen width
  • Jquery - Jquery Wysiwyg return html as a string
  • how to add data labels for bar graph in matlab
  • Android Studio and gradle
  • python regex in pyparsing
  • Observable and ngFor in Angular 2