Klebrige Fußzeile, die Inhalte versteckt

Lesezeit: 3 Minuten

Benutzer-Avatar
weiches Gen

Ich habe die folgende klebrige Fußzeile mit CSS erstellt. Der untere Seiteninhalt ist derzeit hinter der Fußzeile verborgen (siehe beigefügten Screenshot). Wie kann ich mein CSS so anpassen, dass der gesamte Body-Inhalt sichtbar ist und die Fußzeile am unteren Rand des Browserfensters klebt? Vielen Dank!

Geben Sie hier die Bildbeschreibung ein

CSS:

.fo {
    position: absolute;
    left: 0;
    bottom: 0;
    height:65px;
    width: 100%;
    color: #eaeaea;
    margin-left: -8px;
}

  • Sie haben Ihrer Fußzeile eine Höhe von 65 Pixel gegeben. Geben Sie Ihrem Inhalts-Div einfach einen unteren Rand von 65 Pixel und alles ist in Ordnung

    – Sven Bieder

    14. Dezember 2012 um 15:30 Uhr

  • @SvenBieder genau das war der Fall

    – sanftes Gen

    14. Dezember 2012 um 15:42 Uhr


Benutzer-Avatar
Greg

Sie können ein klares div erstellen und ihm eine Höhe zuweisen.

.clear { clear: both; height: 60px; }

<div class="clear"></div>
<div id="footer">FOOTER CONTENT</div>

Die Höhe ist alles, was Sie brauchen, um den Inhalt über der Fußzeile zu halten, z. höher als die Fußzeile. Wenn die Fußzeile 50 Pixel groß ist; groß, ich mache 60px; für die Höhe im klaren div. Wenn ich also scrolle, bleibt die Fußzeile an Ort und Stelle, aber wenn ich nach unten komme, hat der Inhalt, der hinter der Fußzeile fließt, Platz, um über die Fußzeile geschoben zu werden, ohne verdeckt zu werden. Super einfach, und es hat perfekt funktioniert.

Ich bin in der Vergangenheit auf diese Antwort im Internet gestoßen. Funktioniert super:

HTML

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

CSS

    html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}
/* IE 6 and down:
#container {
   height:100%;
}

  • Dies funktionierte perfekt für mich. Wenn der Inhalt kurz war, blieb die Fußzeile am unteren Rand des Bildschirms, während sich der Inhalt ausdehnte, bewegte sich die Fußzeile und blieb am unteren Rand des Bildschirms, ohne den Text zu überlappen.

    – aspnetdeveloper

    30. Juli 2015 um 20:21 Uhr

  • Die Position der Fußzeile sollte sein fixed nicht absolute oder es wird verschoben, wenn der Inhalt wie von @aspnetdeveloper beschrieben erweitert wird

    – Kenneth P. Hough

    3. September 2021 um 22:03 Uhr


Benutzer-Avatar
vvedro

Dies kann am Ende des HTML helfen:

.spacer{
  margin-bottom: 110px; /* how high is your footer */
  visibility: hidden; 
}
<div  class="spacer"> . </div> /* you need to type someting, simple point can do the trick */

Benutzer-Avatar
Sarah

Ich hatte auch Probleme damit, als ich auf meine eigene Lösung kam. Ich habe meine Fußzeile so eingestellt, dass sie a hat height von 10% :

footer{
  position: fixed;
  **height:10%;**
  width:100%;
  padding-top: 2px;
  bottom: 0;
  clear: both;
  background-color: black;
  color: white;
  float: left;
  overflow: auto;
}

und mein Inhalt, a zu haben bottom margin von 11% :

#content{
  width: 800px;
  margin: auto;
  background-color: rgba(0,0,0,.7);
  color: #99FFCC;
  height: 80%;
  padding:30px;
  **margin-bottom: 11%;**
}

Ich hoffe, das hilft allen, die das gleiche Problem hatten!

Ich hatte das gleiche Problem und die anderen Lösungen wiesen mich in die richtige Richtung, aber da ich Angular Material verwende, musste ich nur layout=”column” hinzufügen und es funktionierte großartig

    <div id="container" layout="column">
       <div id="header"></div>
       <div id="body"></div>
       <div id="footer"></div>
    </div>

Benutzer-Avatar
trylimits

Ich füge einfach ein leeres div direkt vor der Fußzeile hinzu und habe es mit einer ID (div-spacer) benannt:

<div id="div-spacer"></div>

Dann habe ich eine einfache Codezeile erstellt, die die Höhe des letzten Elements erfasst und auf das div setzt:

$(document).ready(function () {
  $('#div-spacer').css("height",$('.card-transaction:last').css("height"));
});

Bei dieser Lösung ist immer das letzte Element sichtbar!

Benutzer-Avatar
Vik

Ich habe das br-Tag einfach fünfmal am Ende des Textkörpers hinzugefügt, um zusätzliche Leerzeichen zu schaffen. Es hat mir geholfen.

Manchmal funktioniert es einfach, es einfach zu halten !!!

1217140cookie-checkKlebrige Fußzeile, die Inhalte versteckt

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy