在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。此外，在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的，很少是可行的。实际上实现这个效果过于复杂，而且还需要增加特定的标记和一些Hack手段。在CSS2.1中受到一些限制，但使用现代CSS，我们能把这个效果做得更好，那要如何做呢？
1、嵌套层级不深，可直接继承自 body
【CSS Sticker Footer布局详解】
在网页设计领域，Sticker Footer布局是一种常见的设计模式，它确保页脚在页面内容不足时固定在视口底部，而在内容足够多时，页脚会随内容一起向下滚动。这一设计既实用又美观，但实际实现起来却并非易事，尤其是在CSS2.1时代。
在早期的CSS解决方案中，通常需要为页脚设定一个固定的高度，这种方法存在一定的风险，因为页面内容的变化可能导致固定高度不再适用。此外，为了达到预期效果，往往需要添加额外的HTML标记和一些CSS Hack。然而，随着CSS技术的发展，尤其是Flexbox和Grid布局的引入，我们能够更优雅地实现Sticker Footer效果，且无需过多依赖特定的标记或复杂的Hack技巧。
1. **基础的Sticker Footer布局**
这种方法适用于嵌套层级不深的情况，可以直接继承`body`的样式。HTML结构如下：
```html
<body>
<div id="sticker">
<div class="sticker-con">我是内容</div>
</div>
<div class="footer">我是脚</div>
</body>
```
CSS样式如下：
```css
html, body {
width: 100%;
height: 100%;
}
#sticker {
width: 100%;
min-height: 100%;
}
.sticker-con {
padding-bottom: 40px; // 页脚的高度
}
.footer {
margin-top: -40px; // 页脚的高度
}
```
通过`min-height: 100%`和负值`margin-top`来保持页脚的粘贴效果。
2. **适用于嵌套层级深的情况**
当元素无法直接从父元素继承百分比高度时，可以创建一个包裹元素（如`wrapper`），设置其为`position: fixed`并应用百分比高度。
```html
<body>
<div id="wrapper">
<div id="sticker">
<div class="sticker-con">我是内容</div>
</div>
<div class="footer">我是脚</div>
</div>
</body>
```
CSS样式如下：
```css
.wrapper {
position: fixed;
overflow: auto;
width: 100%;
height: 100%;
}
```
这种方法确保`wrapper`可以继承`body`的高度，并通过内部样式实现Sticker Footer。
3. **使用JavaScript动态计算高度**
在某些情况下，可能需要通过JavaScript获取视口高度来动态设置`min-height`，这在有头部导航栏或其他动态高度元素时尤其有用。
```html
<body>
<div id="sticker">
<div class="sticker-con">我是内容</div>
</div>
<div class="footer">我是脚</div>
</body>
```
JavaScript代码：
```javascript
var sticker = document.querySelector('#sticker');
var h = document.body.clientHeight;
sticker.style.minHeight = h - 44 + 'px'; // 44 是页脚的高度
```
4. **利用Flexbox布局**
Flexbox布局提供了一种更现代且更强大的方法来实现Sticker Footer。
```html
<body>
<header>头部导航栏</header>
<div id="wrapper">
<div id="sticker">
<div class="sticker-con">我是内容</div>
</div>
<div class="footer">我是脚</div>
</div>
</body>
```
CSS样式如下：
```css
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
header {
height: 44px; // 头部导航栏高度
width: 100%;
text-align: center;
line-height: 44px;
}
#wrapper {
display: flex;
flex-direction: column;
width: 100%;
}
#sticker {
background-color: red;
flex: 1;
}
#sticker .sticker-con {
padding-bottom: 40px; // 页脚的高度
}
.footer {
background-color: green;
height: 40px;
}
```
在这里，我们设置了`wrapper`的`display: flex`和`flex-direction: column`，使得`sticker`能占据所有可用空间，而`footer`则位于底部。
通过以上方法，我们可以利用现代CSS技术轻松实现Sticker Footer布局，无论页面内容如何变化，都能保持良好的用户体验。随着Web开发技术的不断进步，我们能够用更简洁、更灵活的方式处理复杂的页面布局问题。
