Wie erstelle ich mit HTML und CSS eine feste Kopf- und Fußzeile mit scrollbarem Inhalt?-CSS-Tutorial-php.cn

Wie erstelle ich mit HTML und CSS eine feste Kopf- und Fußzeile mit scrollbarem Inhalt?

Linda Hamilton

Freigeben： 2024-12-02 12:16:11

Original

931 Leute haben es durchsucht

How to Create a Fixed Header and Footer with Scrollable Content Using HTML and CSS?

Feste Kopf- und Fußzeile mit scrollbarem Inhalt

Die Implementierung einer festen Kopf- und Fußzeile mit scrollbarem Inhalt kann mit dem folgenden Mindest-HTML und CSS erreicht werden Code.

<html>
  <body>

Nach dem Login kopieren

body {
  height: 100%;
  width: 100%;
}

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 200px;
  right: 0px;
  overflow: hidden;
}

#content {
  position: absolute;
  top: 200px;
  bottom: 200px;
  left: 0px;
  right: 0px;
  overflow: auto;
}

#footer {
  position: absolute;
  bottom: 0px;
  height: 200px;
  left: 0px;
  right: 0px;
  overflow: hidden;
}

Nach dem Login kopieren

Dieser HTML- und CSS-Code erstellt eine feste Kopf- und Fußzeile mit einem scrollbarer Inhaltsbereich in der Mitte. Die Kopf- und Fußzeile haben eine feste Höhe, während der Inhaltsbereich vertikal gescrollt werden kann.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit HTML und CSS eine feste Kopf- und Fußzeile mit scrollbarem Inhalt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!