suchen

Heim  >  Fragen und Antworten  >  Hauptteil

Neue Kopfzeile: Stellen Sie sicher, dass sich die Fußzeile immer am Ende der Seite befindet

<p>Ich arbeite an einem Projekt, bei dem ich möchte, dass die Fußzeile am Ende der Seite bleibt, aber erst sichtbar ist, wenn ich zum Ende der Seite scrolle. Ich habe versucht, „position: Fixed“ in meinem CSS zu verwenden, aber es schwebt über meinem Inhalt und wird für die absolute Positionierung in der Mitte der Seite fixiert und deckt den Inhalt ab. Außerdem gibt es bei Seiten, die nicht viel Inhalt haben, Leerraum unter der Fußzeile, wenn ich keine Position spezifiziere oder „Position: absolut“ verwende. Bitte um Vorschläge. </p> <pre class="brush:php;toolbar:false;">* { Rand: 0; Polsterung: 0; } Header { Hintergrundfarbe: grau; } Fusszeile { Hintergrundfarbe: grau; unten: 0; Höhe: 20px; Position: fest; Breite: 100 %; } /* Wenn ich eine feste Positionierung verwende, ist die Fußzeile fest über dem Inhalt. Ich möchte, dass die Fußzeile am unteren Rand der Seite bleibt, aber nicht sichtbar ist. */ <html> <Körper> <header>Titel</header> <Haupt> <h1>Titel</h1> <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Adipisci eos deserunt fugiat doloremque your text`ut.</p> </main> <footer>&copy; Copyright, Kommerziell</footer> </body> </html></pre>
P粉318928159P粉318928159496 Tage vor510

Antworte allen(1)Ich werde antworten

  • P粉554842091

    P粉5548420912023-08-28 20:08:54

    我认为你可以给它添加一个父级div,父级div的宽度和高度与它相同。

    html:

    .footer {
      position: fixed;
      bottom: 0;
      left: 0;
      width: 100vw;
      height: 200px;
      background-color: red;
    }
    .footer-container {
      height: 200px;
      width: 100vw;
    }
    <div class="footer-container">
      <div class="footer"></div>
    </div>

    Antwort
    0
  • StornierenAntwort