下面是“详解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技术站