Menu
http://cdpn.io/FykHr I seem to have an issue with the combined CSS properties:
position: absolute; bottom: 0; First you can see that the .footer div doesn't isn't at the bottom. Now, change the font-size from 120px to 50px and the div seems to be working the way I inteded it to.
How do I make the .footer div stay at the bottom (not fixed at the bottom of the screen) regardless of the size of the .content div.
783
bottom: 0; If the element is in position absolute, the element will position itself from the bottom of the first positioned ancestor.
Absolute positioning defines the position of a given bounding box from the top and left side margins of the web page. This not only allows objects to be placed in an exact location, it also allows objects to be placed one on top of another.
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.
If position: absolute; or position: fixed; - the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor. If position: relative; - the bottom property makes the element's bottom edge to move above/below its normal position.
You need to add position: relative; to the parent container, which in this case is .wrapper.
Here's a good reference page on absolute positioning.
70
There is one way to do that:
body { height: 100%; margin: 0; } html { padding-bottom: 50px; min-height: 100%; box-sizing: border-box; -moz-box-sizing: border-box; position: relative; } footer { position: absolute; bottom: 0; left: 0; right: 0; height: 50px; background-color: red; } http://jsfiddle.net/n8UNM/
There is still one limitation. You have to know height of footer and set it in two places.
31
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
