HTML と CSS を使用してスクロール可能なコンテンツを含む固定ヘッダーとフッターを作成する方法-CSSチュートリアル-php.cn

HTML と CSS を使用してスクロール可能なコンテンツを含む固定ヘッダーとフッターを作成する方法

Linda Hamilton

リリース： 2024-12-02 12:16:11

オリジナル

932 人が閲覧しました

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

スクロール可能なコンテンツを含む固定ヘッダーとフッター

スクロール可能なコンテンツを含む固定ヘッダーとフッターの実装は、次の最小限の HTML と CSS で実現できます。コード。

<html>
  <body>

ログイン後にコピー

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

ログイン後にコピー

これHTML および CSS コードは、中央にスクロール可能なコンテンツ領域を持つ固定ヘッダーとフッターを作成します。ヘッダーとフッターの高さは固定されていますが、コンテンツ領域は垂直にスクロールできます。

以上がHTML と CSS を使用してスクロール可能なコンテンツを含む固定ヘッダーとフッターを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。