bottom: 0; width: 100%; padding-top:10px; padding-bottom:10px; background-color: #f5f5f5;} Any ideas why this might not be working properly? I'm pretty sure we're both trying to have the footer at the bottom of the page with no scrolling. All you need to do is set the position CSS style to "fixed" and the bottom property to "0" to ensure that your footer will always stick to the bottom of your page (regardless of your content) : #footer { position: fixed; bottom: 0; } You can see a bit more of a detailed example below : The footer is placed outside the content wrapping div. Did you set anything to a fixed height? Check Different First Page to see if it's selected. January 18, 2015 at 2:01 pm #193532. Sample Please note that I don’t want it FIXED so bootstrap navbar-fixed-bottom does not solve my problem. SA. If you work with DIVI and want to keep your footer always at the bottom also on short pages, meaning to avoid a footer floating somewhere up in the air, but you don’t want a fixed footer that is always visible, then you just found a possibility to do so. I don’t use JavaScript or any library for creating this program, this is in pure CSS & HTML. Reply. Learn how to keep the footer at the bottom of the page, even if the content above it is too short to naturally push it to the bottom, using CSS. Thanks in advance. Permalink to comment # July 22, 2012. The footer, rather than staying at the bottom of the page where we would want it to stay, rises up and leaves a blank space beneath it. 🎉 First: The content structure Most of the web sites I work with have a pretty simple basic structure. As you can see the footer is pushed to the bottom of the page properly. Finally fixed my footer at the bottom of page without overlapping any content even on smaller screen sized using this simple css rule. I've tried putting bottom: auto; position: fixed; in the css for it, but it just stays in the same place and content is loaded on top of the footer. In cases where pages are long enough, the footer will behave like a normal one and will get pushed down until the bottom of the page, thus not the screen. This article is all about teaching you how to avoid this ugly "footer gap" once and for all! I heard many developers having an issue with browsers supports. I have used the following .. but anyway the footer is not fixing… html, body {height: 100%;} #wrap {min-height: 100%;} #main {overflow:auto; … With the help of a few lines, we can easily fix the footer at the bottom of the page with wide-range of browser support. Permalink to comment # June 19, 2012. By using Javascript doesn’t mean that I will not use the CSS. They have an outer container, a site header, a content area and a site footer. #footer { position: absolute; bottom: 0; height:50px; margin-top;2px; } What this does is that it assigns a absolute position to the footer div with given height and bottom set to zero that makes footer stick to the bottom of the page. If you thinking now how this program will look in reality, then there is a preview for you given below. Double-click the header or footer area (near the top or bottom of the page) to open the Header & Footer tab. I just want it to be always at the bottom of the content and also be responsive. If you inserted page numbers at the top or bottom of the page, the header or footer area of your document automatically opens up, and you can make any addition you like around your new page numbers. How can we stick that footer to the bottom of the screen? Word’s default bottom margin is 1” (2.54 cm), which will be adequate for most printers, but the page footer (if any) will be below the bottom margin. Reply. For a quick fix, you can absolutely position the footer at the bottom of the page. Few Other Fixed Footer at Bottom Solutions. To make a footer fixed at the bottom of the webpage, you could use position: fixed… If you want to create a fixed bottom footer, then this program also will help you. Quick thing I noticed is that .ten wrapper element in your