Reagieren Sie auf der Seite, halten Sie die Fußzeile unten auf der Seite

Lesezeit: 5 Minuten

Der Benutzeravatar von Nguyen
Ein Nguyen

Ich habe ein Problem, wenn ich versuche, die Fußzeile unten auf der Seite wie im folgenden Bild zu reparieren:

Geben Sie hier die Bildbeschreibung ein

Ich google zwar und sehe viele Vorschläge, aber ich stehe immer noch vor dem Problem. Ich vermute, dass dieses Problem ist <div data-reactroot></div> kann nicht zu 100 % als seine Eltern eingestellt werden. Könnte mir jemand helfen?

Danke im Voraus!

Aktualisieren: Stil der Fußzeile:

borderTop: '1px solid #ddd',
height: '60px',
lineHeight: '60px',
backgroundColor: 'white'

  • Stellen Sie sicher, dass Sie Ihre einstellen html, body { height: 100% }

    – Strgplusb

    4. Oktober 2016 um 16:29 Uhr

  • Ja, ich bin mir sicher html, body { height: 100% }

    – Ein Nguyen

    4. Oktober 2016 um 16:31 Uhr

  • Ich habe versucht einzustellen height und/oder min-height von <div id="bms-root"> ist 100%, aber ich bekomme das gleiche Ergebnis.

    – Ein Nguyen

    4. Oktober 2016 um 16:38 Uhr

  • Was ist das aktuelle Fußzeilenproblem? Wie würde eine feste Fußzeile aussehen?

    – JohannesH

    4. Oktober 2016 um 16:40 Uhr

  • Ich möchte die Fußzeile am Ende der Seite korrigieren. Das bedeutet, dass die Fußzeile immer unten angezeigt werden sollte.

    – Ein Nguyen

    4. Oktober 2016 um 16:46 Uhr


Benutzeravatar von mwoelk
mwoelk

Sie müssen Ihrer Fußzeile mitteilen, dass sie sich am unteren Rand des umgebenden Containers positionieren soll:

Fußzeilen-CSS:

position:absolute;
left:0;
bottom:0;
right:0;

Und für den Container (das React-Root-Div):

padding-bottom:60px;

Als Alternative (wenn Sie IE 8 nicht unterstützen müssen) können Sie diesen Stil auf dem ausprobieren div.container :

height: calc(100% - 60px);

  • Das funktioniert richtig. Danke nochmal. Übrigens, wie kann ich den Text “Kein Ergebnis” in der Mitte des Bildschirms erstellen?

    – Ein Nguyen

    5. Oktober 2016 um 14:41 Uhr

  • Diese Lösung ist nicht scrollfreundlich. Beim Scrollen bleibt die Fußzeile an ihrer ursprünglichen Position hängen

    – Sanchit Bhatnagar

    6. März 2020 um 16:24 Uhr

  • Wenn Sie eine scrollfreundliche Lösung benötigen, verwenden Sie position:fixed; um es immer unten zu halten. Möglicherweise müssen Sie auch einen Z-Index hinzufügen, um ihn über anderen Elementen zu halten.

    – mwoelk

    6. März 2020 um 23:45 Uhr

Benutzeravatar von Ikechukwu Kalu
Ikechukwu Kalu

Für jede andere Person, für die die oben genannten Lösungen nicht funktionieren, könnten Sie die folgenden Schritte ausprobieren:

  1. Gib die Elternteil div ein nicht statisches position wie zum Beispiel relative (Denken Sie an die Voreinstellung position ist static)
  2. Gib die Elternteil div eine Mindesthöhe von 100vh; Dadurch kann es den gesamten verfügbaren Platz vertikal einnehmen
  3. Dann für die Fußzeile (Kind), die in a eingewickelt werden sollte div wenn nicht, gib ihm die folgenden Eigenschaften; position: absolute; bottom: 0; width: 100%.

AKTUALISIEREN: In einigen Fällen Einstellung der Fußzeile div position zu absolute kann nicht funktionieren. Verwenden Sie in einem solchen Fall relative stattdessen.

Hoffentlich sollten die obigen Schritte das Problem beheben 🙂

  • Es scheint, dass “relativ” nur auf Seiten funktioniert, die länger als das Browserfenster sind, und “absolut” nur auf Seiten funktioniert, die kleiner oder gleich hoch wie das Browserfenster sind.

    – Lerk

    29. Oktober 2019 um 12:08 Uhr

  • Ja @Lerk, es scheint so

    – Ikechukwu Kalu

    29. Oktober 2019 um 12:31 Uhr

Es ist wichtig, einen Content Wrapper zu haben und seine Mindesthöhe auf 100 vh einzustellen:

min-height: 100vh; (100% of the viewport height)

min-height: 100%; (100% of the parent's element height)

Schau mal hier ist sehr gut erklärt und hat bei mir funktioniert:
https://medium.com/@zerox/keep-that-damn-footer-at-the-bottom-c7a921cb9551

Ich würde das Fußzeilen-CSS wie folgt ändern:

  position: fixed;
  left:0;
  bottom:0;
  right:0;

Es ist möglich, eine zu haben position: absolute aber es wird nicht scrollfreundlich sein.

Ein Trick, von dem ich glaube, dass jeder hier fehlt, ist, dass es in React nach HTML- und Body-Element auch ein Div mit gibt #Wurzel die den gesamten Inhalt umschließt. Bitte beachten Sie das Bild unten.

Geben Sie hier die Bildbeschreibung ein

Daher ist es erforderlich, die Höhe aller 3, dh html, body und #root, auf 100 % einzustellen.

html, body, #root {
  height: 100%;
}

Fügen Sie dann diese Eigenschaften in #root hinzu:

#root {
 display: flex;
 flex-direction: column;
}

Sie müssen sich fragen, warum die #Wurzel Flex und nicht der Körper sein muss. Der Grund dafür ist, dass es der innerste Elternteil ist, oder ich sollte sagen, der nächste Elternteil der Fußzeile.

Jetzt endlich nur noch für die Fußzeile:

footer: { margin-top: auto }

Was die obige Zeile tut, ist, dass sie die Fußzeile an das Ende ihres Elternteils verschiebt. So einfach ist das. Nichts Besonderes hier. Es ist nicht erforderlich, die Höhe zu berechnen oder die Position der Fußzeile zu ändern.

  • Ich musste es von 100% auf 100vh ändern, aber das hat bei mir funktioniert.

    – Lauren

    3. März 2021 um 2:53 Uhr

Benutzeravatar von ceckenrode
eckenrode

Versuchen Sie, einen Wrapper für Ihre Seite zu haben, damit Sie die Fußzeile absolut unten positionieren können? Wenn ja, können Sie dafür eine neue Komponente mit relativer Position erstellen und die anderen als untergeordnete Elemente übergeben und Ihrer Fußzeile eine absolute Positionierung unten geben.

  • Ich musste es von 100% auf 100vh ändern, aber das hat bei mir funktioniert.

    – Lauren

    3. März 2021 um 2:53 Uhr

Benutzeravatar von guneetgstar
guneetgstar

Ich wünschte, ich hätte es früher gelesen. Hier ist der Ausschnitt für die Ikechuk-Antwort und beachten Sie, dass jetzt die footer respektieren Sie auch die Marge (die möglicherweise nicht in anderen Antworten oben enthalten ist):

html, body, div{
      height:100%;
      width:100%
      display:block;
    }
    footer{
      position:absolute;
      bottom:0;
      display:block;  
      width:100%
      
 }
 hr{
      display: block;
    unicode-bidi: isolate;
    margin-block-start: 0.5em;
    margin-block-end: 0.5em;
    margin-inline-start: auto;
    margin-inline-end: auto;
    overflow: hidden;
    border-style: inset;
    border-width: 1px;
 }
<html>
<body>

<div style={"margin=5%;"}>
<div style={"position:relative"}>
<footer>
  <hr>
  I am footer
</footer>

</div>
</div>
</body>
</html>

1436900cookie-checkReagieren Sie auf der Seite, halten Sie die Fußzeile unten auf der Seite

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

Privacy policy