Menu
What is best practice for setting up a web page so that if there is very little content/text to be displayed on that web page the footer is displayed at the bottom of the browser window and not half way up the web page?
770
The reason you can't have a normal footer on your page is because you have used absolute positioning for your content and columns. Absolute elements are removed from the flow and you can't place a footer under absolute columns.
Set the position of div at the bottom of its container can be done using bottom, and position property. Set position value to absolute and bottom value to zero to placed a div at the bottom of container.
Use the WPFront Notification Bar Plugin To enable the floating footer bar, select the option to fix the bar at the bottom position. What is this? Change the position from “top” to “bottom”. Check the box to enable “fixed at position” which is what fixes it to the bottom of the screen.
What you’re looking for is the CSS Sticky Footer.
* { margin: 0; padding: 0; } html, body { height: 100%; } #wrap { min-height: 100%; } #main { overflow: auto; padding-bottom: 180px; /* must be same height as the footer */ } #footer { position: relative; margin-top: -180px; /* negative value of footer height */ height: 180px; clear: both; background-color: red; } /* Opera Fix thanks to Maleika (Kohoutec) */ body:before { content: ""; height: 100%; float: left; width: 0; margin-top: -32767px; /* thank you Erik J - negate effect of float*/ }<div id="wrap"> <div id="main"></div> </div> <div id="footer"></div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
