下面是“详解CSS经典布局之Sticky footer布局”的完整攻略。
简介
Sticky footer布局是一种常用的网站页面布局方式。它的特点是底部的footer元素始终粘着页面底部，不会因内容高度不足而漂浮在中间或者底部。
实现思路
实现Sticky footer布局的关键在于以下两点：
- 父元素高度设置为100%。
- footer元素使用绝对定位，并将其bottom属性设置为0。
HTML结构
首先我们来看一下HTML结构，通常我们需要使用一个包裹所有内容的容器，并在其中添加header、content和footer三个元素，如下所示：
<body>
<div class="wrapper">
<header>Header</header>
<div class="content">
<!-- 主要内容 -->
</div>
<footer>Footer</footer>
</div>
</body>
CSS样式
接下来我们需要给每个元素添加对应的CSS样式，具体的实现代码如下所示：
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
min-height: 100%;
position: relative;
}
header {
height: 50px;
background-color: #dcdcdc;
}
.content {
padding-bottom: 100px; /* 与footer高度相同 */
}
footer {
height: 100px;
background-color: #f5f5f5;
position: absolute;
bottom: 0;
width: 100%;
}
这个CSS样式的主要思路就是让wrapper元素的高度铺满整个屏幕，对于header、content和footer元素分别添加对应的高度和背景色等样式属性，让它们在页面中的位置相对于wrapper元素进行定位。
在上面的CSS代码中，我们将wrapper元素的position属性设置为relative，让其内部的元素可以通过absolute或fixed定位，之后再通过给footer元素添加position: absolute 和 bottom: 0的样式，让它的位置始终保持在wrapper元素的底部，并不会随着页面内容的高度变化而改变位置。
另外也需要在.content元素中添加padding-bottom样式属性，该属性的值需要与footer元素的高度相等，这样可以为footer元素腾出足够的空间，让它可以与content元素隔开。
示例说明：
下面分别对Flexbox和Grid Layout两种布局方式进行讲解：
示例一：使用Flexbox实现Sticky footer布局
HTML结构：
<body>
<div class="wrapper">
<header>Header</header>
<div class="content">
<!-- 主要内容 -->
</div>
<footer>Footer</footer>
</div>
</body>
CSS样式：
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.wrapper {
flex: 1;
}
header {
height: 50px;
background-color: #dcdcdc;
}
.content {
flex: 1;
padding-bottom: 100px; /* 与footer高度相同 */
}
footer {
height: 100px;
background-color: #f5f5f5;
}
在这个示例中，我们使用了Flexbox布局方式来实现Sticky footer布局。首先需要将body元素的display属性设置为flex，这样可以让wrapper元素使用flex布局。然后给wrapper元素的flex属性设置为1，让其在垂直方向上填满整个可视区域。让header元素和footer元素使用固定高度（50px和100px），并将content元素的flex属性设置为1，让它可以占用wrapper元素剩余的所有空间。
示例二：使用Grid Layout实现Sticky footer布局
HTML结构：
<body>
<div class="wrapper">
<header>Header</header>
<div class="content">
<!-- 主要内容 -->
</div>
<footer>Footer</footer>
</div>
</body>
CSS样式：
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
display: grid;
grid-template-rows: auto 1fr auto;
}
.wrapper {
grid-row: 2;
}
header {
height: 50px;
background-color: #dcdcdc;
}
.content {
padding-bottom: 100px; /* 与footer高度相同 */
}
footer {
height: 100px;
background-color: #f5f5f5;
}
在这个示例中，我们使用了Grid Layout布局方式来实现Sticky footer布局。我们首先将body的display属性设置为grid，并使用grid-template-rows属性将body分成三行，第一行和第三行使用auto设置高度，中间一行使用1fr占据所有剩余的空间。然后通过将wrapper元素设置为第二行，使得它可以填满整个屏幕的剩余空间。最后在content元素中添加padding-bottom样式属性，让其与footer元素隔开。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解CSS经典布局之Sticky footer布局 - Python技术站
微信扫一扫 
支付宝扫一扫 