ホームページ >ウェブフロントエンド >CSSチュートリアル >HTML と CSS を使用してスクロール可能なコンテンツを含む固定ヘッダーとフッターを作成する方法
HTML と CSS を使用してスクロール可能なコンテンツを含む固定ヘッダーとフッターを作成する方法
- Linda Hamiltonオリジナル
- 2024-12-02 12:16:111005ブラウズ
スクロール可能なコンテンツを含む固定ヘッダーとフッター
スクロール可能なコンテンツを含む固定ヘッダーとフッターの実装は、次の最小限の 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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。