webentwicklung-frage-antwort-db.com.de

CSS: Fußzeile überlappender Inhalt, andere Störungen

Ich habe mich hier und an anderen Orten nach ähnlichen Problemen umgesehen, aber ich finde keine endgültige Antwort. Wenn ich einer Seite so viel Text hinzufüge, dass sie zur Fußzeile kommt, überlappt die Fußzeile einfach den Text. Dasselbe gilt, wenn ich die Größe des Browserfensters verkleinere, um die Fußzeile und den Container zu zwingen, der den Inhalt enthält. Gelegentlich äußert sich dies auch im "Container", auch bekannt als hellerer grauer Teil, der aus irgendeinem Grund schrumpft, obwohl er immer 100% der Höhe einnehmen sollte.

Das ist die Art von Sachen, die mich die ganze Nacht wach hält, also denke ich nicht sehr klar. Ich bin sicher, es ist etwas Dummes und leicht zu beheben, aber ich bin kein professioneller Designer und vermisse auf jeden Fall das Problem.

Nachfolgend finden Sie mein CSS und ein JSFiddle, das ich mit allen relevanten Teilen einer Seite erstellt habe.

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%;
}

Ein Modell einer typischen Seite.

9
Flawedspirit

Ändere das:

#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
Sagar Guhe

Siehe DEMO

Ich habe einige CSS-Änderungen vorgenommen. Guck mal. Ich hoffe es hilft dir.

Aktualisiertes CSS

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

Jeder, der 2017 darauf stolpert, sollte wissen, dass eine großartige Option entwickelt wurde, um Layout-Kopfschmerzen wie diese zu lindern. flexbox

Alles was Sie tun müssen, ist <body> zu setzen:

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

Wenden Sie dann flex:1 1 auto auf den "main" - oder mittleren Abschnitt an, in diesem Fall #container. Dadurch wird es vertikal erweitert, um den verfügbaren Platz zu füllen. Dabei wird sichergestellt, dass die Fußzeile unten bleibt:

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

Wir fügen align-items in das flex-Elternteil ein, um auch die Querachsen-Zentrierung zu handhaben (in unserem Fall horizontal):

Hier ist ein Beispielausschnitt von oben:

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>

3
sweaver2112

Schreiben Sie zuerst diesen Code

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%;

}

und stellen Sie jetzt Medienabfragen ein

@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%;

} }

hoffe das wird dir helfen :)

1
Amol Impal

Ich glaube, Sie haben nach einer klebrigen Fußzeile gesucht, die nicht am unteren Rand der Seite fixiert ist (also keine Überlappung). Ich wollte diese Antwort hinzufügen, weil es funktioniert hat und es näher an dem liegt, wonach ich gesucht habe. 

Lösung

Die Lösung kommt von Chris Bracco und ich werde im Detail beschreiben, was Sie brauchen, um den Effekt zu reproduzieren:

HTML

Ihr HTML ist wie:

<html>

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

</html>

CSS

Sie müssen in Ihrer CSS etwas hinzufügen:

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*/
}

Beispiel

Das ist wie die Basis, die Sie zum Erstellen der klebrigen Fußzeile benötigen. Hier ist ein Beispiel (mit etwas mehr CSS für ein besseres 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>

Erweitern Sie das Snippet und sehen Sie sich das Ergebnis in voller Größe an, um zu sehen, wie es funktioniert.

0
Sylhare