CSSスティッキーフッター
スティッキーフッターを固定フッターと混同しないでください。スティッキーフッターは、フッターが常に画面の下部（コンテンツがページを埋めない場合）またはWebページのコンテンツの下部に貼り付くパターンです。 。ユーザーがページをスクロールしても、固定フッターは画面の下部に留まります。これらのコードエディタの例は、違いを区別します。
固定フッター：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sticky Footer</title>
</head>
<style>
body {
width: 100%;
margin: 0 auto;
text-align: center;
}
header {
background: orange;
height: 100px;
display: inline-block;
width: 100%;
}
p {
text-align: left;
width: 80%;
margin: 0 auto;
line-height: 5rem;
font-size: 2rem;
text-indent: 5rem;
}
footer {
background: black;
color: white;
position: fixed;
bottom: 0;
width: 100%;
}
</style>
<body>
<header>
<h1>This is a header</h1>
</header>
<div>
<h2>This is the website content.</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Aspernatur cum aliquid nostrum dolore sunt ex exercitationem,
enim provident quia laudantium, blanditiis repellendus similique
in possimus, nisi voluptatem? Quibusdam, suscipit impedit.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis
veritatis doloremque recusandae similique mollitia quod impedit,
rerum inventore beatae quia vel aperiam maiores corrupti tenetur
illo praesentium repudiandae a distinctio?
</p>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Dicta
saepe, reiciendis in maxime perspiciatis cum similique a quis
accusamus blanditiis harum voluptates at doloribus autem numquam
sint? Qui, tempora ratione!
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde,
deserunt placeat? Laborum voluptates minus, adipisci odit
repellat corrupti libero! Asperiores delectus quasi debitis
mollitia eum et vel recusandae quas esse.
</p>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Molestias ad dolorem rerum suscipit eos eius libero animi omnis,
ea esse distinctio doloremque corporis, a quidem inventore sequi
nostrum aut impedit.
</p>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
Suscipit quod ipsum maiores, minus non atque asperiores corrupti
placeat nulla temporibus est libero numquam ad culpa architecto
reprehenderit nemo doloribus ipsa?
</p>
</div>
<footer>
<h5>This is a fixed footer.</h5>
</footer>
</body>
</html> スティッキーフッター：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sticky Footer</title>
</head>
<style>
.container {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.page-header, .page-footer {
flex-shrink: 0;
}
h1, h2, h3, h4, h5 {
text-align: center;
}
.orange {
background: orange;
}
.page-body {
background: blue;
flex-grow: 1;
}
.page-body p {
text-align: left;
width: 80%;
margin: 0 auto;
line-height: 4rem;
font-size: 1.8rem;
text-indent: 4rem;
}
.black {
background: black;
color: white;
}
</style>
<body>
<div class="container">
<header class="page-header orange">
<h1>This is a header</h1>
</header>
<div class="page-body">
<h2>This is the website content.</h2>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Molestias neque impedit, libero, officiis repudiandae numquam necessitatibus enim sapiente hic, quam dolores. Atque porro assumenda molestiae. Ipsum laudantium qui odio itaque.</p>
</div>
<footer class="page-footer black">
<h5>This is a sticky footer.</h5>
</footer>
</div>
</body>
</html> 結論
固定フッターは、位置を使用して画面の下部に保持します。 2つ目は、flexboxのflex-growプロパティとflex-shrinkプロパティを使用して、フッターをコンテンツの下部に保持します。各コード例のフッターの特性の違いに注意してください。
上記のサンドボックス環境でプレイすると、これらのパターンを理解するのに役立ちます。物事を変えて、さまざまな値を試してみてください。
-
CSSでスティッキー要素を作成するにはどうすればよいですか？
CSSを使用してスティッキー要素を作成するためのコードは、次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: "Segoe UI", Tahoma, Geneva, Verdana
-
CSSを使用して固定/スティッキーフッターを作成するにはどうすればよいですか？
CSSで固定フッターを作成するためのコードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;