在网页设计中,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开发技术的不断进步,我们能够用更简洁、更灵活的方式处理复杂的页面布局问题。