All geek questions in one place

CSS: footer overlapping, other crashes

I have looked for similar problems here and elsewhere, but I cannot find a definitive answer. When I add enough text to the page that it reaches in the footer, the footer simply overlaps the text. The same thing if I reduce the size of the browser window to make the footer and the container containing the content meet. Sometimes this also appears in the “container”, for example, in the lighter gray part, which for some reason shrinks, although it should always rise 100% of the height.

This is the material that keeps me up all night, so I don’t think very clearly. I am sure that this is something stupid and easy to fix, but I am not a professional designer and, of course, I do not understand what the problem is.

Below is my CSS and JSFiddle, which I did with all the relevant parts of the 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%; }

Typical Page Layout

+10
source share
6 answers

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

+8
source

See DEMO

I made some CSS changes. Take a look. Hope this helps you.

CSS updated

 #footer { bottom: 0; color: #707070; height: 2em; left: 0; position: fixed; /* OldProperty */ position: static;/* Updated Property */ font-size: small; width:100%; }
+5
source

Anyone who has come across this in 2017 should know that a great option has been invented to alleviate the headaches associated with a layout such as flexbox .

Essentially, all you have to do is set <body> to:

 body { display: flex; flex-direction: column; align-items: center; }

Then apply the flex:1 1 auto command to the "main" or middle part, in this case #container , which will expand vertically to fill the available space, ensuring that the footer adheres to the bottom:

 #container { flex: 1 1 auto; /*grow vertically*/ }

We added align-items:center in the flexible parent to handle centering along the axis (in our case, horizontal).

Here is an example of the above snippet:

 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>
+5
source

Write this code first

 footer { background-color: #000; color: #FFFFFF; font-size:.8em; margin-top:25px; padding-top: 15px; padding-bottom: 10px; position:fixed; left:0; bottom:0; width:100%;

}

and now set media queries

 @media only screen and (max-width: 767px){ footer { background-color: #000; color: #FFFFFF; font-size:.8em; margin-top:25px; padding-top: 15px; padding-bottom: 10px; position:static; left:0; bottom:0; width:100%;

}}

hope this helps you :)

+1
source

I believe that you were looking for a sticky footer that remains, although it doesn’t get fixed at the bottom of the page (therefore does not overlap). I wanted to add this answer because for me (it worked) and it was closer to what I was looking for.

Decision

The solution comes from Chris Bracco , and I will explain in detail what you need to reproduce the effect:

HTML

Your HTML looks like this:

 <html> <body class="body-for-sticky"> <...> your content </...> <div class="footer sticky-footer"> your footer </div> </body> </html>

CSS

You need to add something like:

 html { height: 100%; /* for the page to take full window height */ box-sizing: border-box; /* to have the footer displayed at the bottom of the page without scrolling */ } *, *:before, *:after { box-sizing: inherit; /* enable the "border-box effect" everywhere */ } .body-for-sticky { position: relative; /* for the footer to move with the page size */ min-height: 100%; /* for the footer to be at the bottom */ padding-bottom: 6rem; /* Space available between last element and bottom border of the page */ } .sticky-footer { position: absolute; /* for it to disappear under last body element */ bottom: 0; /* so the footer can stick to the bottom*/ }

Example

Which, as a basic, you need to create a sticky footer. Here is an example (with some CSS for better rendering).

 html { height: 100%; box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; } .body-for-sticky { position: relative; min-height: 100%; padding-bottom: 6rem; } .sticky-footer { position: absolute; bottom: 0; } /* for the rendering */ body { margin: 0; font-family: "Helvetica Neue", Arial, sans-serif; } .footer { right: 0; left: 0; padding: 1rem; background-color: #efefef; text-align: center; } .demo { margin: 0 auto; padding-top: 64px; max-width: 640px; width: 94%; } 
 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Sticky footer</title> <style> </style> </head> <body class="body-for-sticky"> <div class="demo"> <h1 style="margin-top: 0">CSS "Always on the bottom" Footer</h1> <p>I often find myself designing a website where the footer must rest at the bottom of the page, even if the content above it is too short to push it to the bottom of the viewport naturally.</p> <p>However, if the content is taller than the user's viewport, then the footer should disappear from view as it would normally, resting at the bottom of the page (not fixed to the viewport).</p> <p>If you know the height of the footer, then you should set it explicitly, and set the bottom padding of the footer's parent element to be the same value (or larger if you want some spacing).</p> <p>This is to prevent the footer from overlapping the content above it, since it is being removed from the document flow with <code>position: absolute;</code>.</p> <p> Source <a href="https://chrisbracco.com/css-sticky-footer-effect" />Chris Bracco</a>.</p> </div> <div class="footer sticky-footer">This footer will always be positioned at the bottom of the page, but <strong>not fixed</strong>.</div> </body> </html>

Expand the fragment and see the result in full size to see how it works.

0
source 
  #footer { z-index: 1; position: absolute; right: 0; bottom: 0; left: -25%; padding: 1rem; background-color: black; text-align: center; height: 3em; left: 0; font-size: small; width:100%; }
-1
source

Source: https://habr.com/ru/post/954534/

More articles:


All Articles