footer定位页面底部(代码分享)
网络编程 2025-03-23 23:22www.168986.cn编程入门
亲爱的开发者们,今天我将分享一段关于如何定位footer至页面底部的实例代码。如果你正在从事网站开发,特别是关注SEO优化,那么请跟随我一起了解这段代码的魅力吧。
让我们直接来看代码吧!
```html
body, html {
margin: 0;
padding: 0;
}
.box {
width: 100%;
height: 300px;
background: pink;
margin-bottom: 30px; / 为底部留出空间 /
}
.footer {
background: red; / 页脚背景色 /
width: 100%; / 页脚宽度 /
height: 30px; / 页脚高度 /
}