Menu
I've looked around for similar issues here and in other places, but I can't seem to find a definitive answer. When I add enough text to a page that it would get to the footer, the footer simply overlaps the text. Same thing if I reduce the size of the browser window to force the footer and the container that holds the content to meet. Occasionally, this also manifests in the "container" aka the lighter gray part, shrinking for some reason, even though it should always be taking up 100% of the height.
This is the sort of stuff that keeps me up all night, so I'm not thinking very clearly. I'm sure it's something stupid and easy to fix, but I'm not a professional designer and am certainly missing what the issue is.
Below is my code, and a JSFiddle that I made with all the relevant parts of a page.
html, body { margin: 0; padding: 0; } html, body { background: #252525; font-family: Arial, Helvetica, sans-serif; height: 100%; text-align: center; } body { background: #363636; border-left: 1px solid #111; border-right: 1px solid #111; margin: 0 22.5%; } #container { color: white; margin-bottom: 2em; min-height: 100%; overflow: auto; padding: 0 2em; text-align: justify; } #footer { bottom: 0; color: #707070; height: 2em; left: 0; position: fixed; font-size: small; width:100%; }<body> <div id="container"> <h1>A webpage</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et. <p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</div> <div id="footer">This is a footer.</div> </body>Here is a JSFiddle example.
474
It is overlapping to your content because of its position. The only way to give them some space between the content and the footer is to remove that custom css and then add a bottom padding in the last section element. Right now, the bottom padding is 0 which is why it is close or overlapping to the footer.
The reason for the overlapping lines is quite simple: The line height is not sufficient to contain the text size. You have "hard-coded" the font-size via inline CSS but did not adjust the line-height , for instance.
Change this:
#footer { bottom: 0; color: #707070; height: 2em; left: 0; position: relative; //changed to relative from fixed also works if position is not there font-size: small; width:100%; } Demo
72
Anyone stumbling upon this in 2017 should know that a great option was invented to alleviate layout headaches such as this, flexbox.
Essentially, all you have to do is set <body> to:
body { display: flex; flex-direction: column; align-items: center; } Then apply flex:1 1 auto to the "main" or middle section, in this case #container, which will make it expand vertically to fill available space, assuring the footer will stick to the bottom:
#container { flex: 1 1 auto; /*grow vertically*/ } We added align-items:center in the flex parent to handle cross-axis centering (in our case, horizontal).
Here is an example snippet of the above:
html, body { margin: 0; padding: 0; } body { font-family: Arial, Helvetica, sans-serif; background: #252525; border-left: 1px solid #111; border-right: 1px solid #111; min-height: 100vh; display: flex; flex-direction: column; align-items: center; } #container { color: white; background: #363636; padding: 2em; background: #363636; flex: 1 1 auto; /*grow vertically*/ width: 55%; text-align: center; } #footer { color: #707070; height: 2em; font-size: small; }<body> <div id="container"> <h1>A webpage</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pretium augue quis augue ornare tempor. Donec eu purus vitae nisi eleifend euismod. Nullam sem nunc, bibendum tempor iaculis eu, consequat in sem. Phasellus nec molestie orci. Fusce varius nisi est, non aliquet dolor porttitor non. Aliquam eu ante nec massa pulvinar posuere. Praesent consectetur porttitor ipsum, eget viverra urna ultricies et.</p> <p>Quisque vehicula neque a enim dignissim, et vestibulum orci viverra. Pellentesque aliquam feugiat interdum. Ut molestie vitae lacus in eleifend. Sed scelerisque urna ut elit venenatis suscipit. Nullam nec urna vel enim mattis interdum ut consequat libero. Proin in imperdiet orci. Vivamus felis lacus, dictum ac eros eu, malesuada pretium nisi. Cras suscipit nunc magna, a egestas neque facilisis sed.</p> </div> <div id="footer">This is a footer.</div> </body>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
