How to Get a Web Page to Stick to the Bottom
When you create a footer for your website, oftentimes, it is difficult to get this element to stick to the bottom of the page. The problem occurs when you do not have enough content to fill your page, which makes the footer content appear higher up. Fortunately, you can write a series of Cascading Style Sheets (CSS) rules to solve this problem. Use your text editor program to create the CSS that ensures your Web page sticks to the bottom in all major browsers.
Other People Are Reading
Instructions
-
-
1
Bring up your text editor program and launch the Web page document that you want to modify. Position your cursor before the closing </head> tag and enter the following CSS code:
<style type="text/css">
html, body { }
.footer, .move { }
.content{ }
</style>The elements listed between the style tags create placeholders for the rules that get your Web page footer to stick to the bottom.
-
2
Position your cursor between the curly brackets of the "html, body" rule and enter "height: 100%;" inside the brackets. This attribute allows your visitor to minimize or maximize your Web page inside a browser window.
-
-
3
Type "height: ;" in the .footer, .move style and enter a number value to specify how high you want your footer content to appear. For instance:
.footer, .move { height: 175px; } -
4
Enter "min-height: 100%;" and "height: 100%;" and "height: auto !important;" inside the ".content" rule that formats the area where you enter your Web page information. Further, type "margin: 0 auto;" and enter the negative margin of the footer's height. Your complete CSS code now looks like the following:
<style type="text/css">
html, body { height: 100%; }
.footer, .move { height: 175px; }
.content { min-height: 100%; height: 100%; height: auto !important; margin: 0 auto -175px; }
</style> -
5
Place your cursor under the beginning <body> tag and enter the HTML code that applies the CSS to your Web page:
<div class="content">
<p>Type your Web page information here.</p>
<div class="move"></div>
</div>
<div class="footer">
<p>Enter your footer content here.</p>
</div> -
6
Save your file and preview it in a browser to see your new website footer.
-
1
Tips & Warnings
The ".move" portion of the style rule helps the Web page stick to the bottom.
The "!important" declaration after an attribute makes sure the attribute is always obeyed even if something else afterwards contradicts it.
If you add padding or border attributes to your .footer, .move rule, be sure to account for this value when creating a negative margin in the .content style.
References
Resources
- Photo Credit Jupiterimages/Polka Dot/Getty Images
