Bootstrap 粘页脚，说得具体一点就是“将固定高度的页脚紧贴页面底部”。由于项目的实际情况和模板有所区别，所以参照模板，小编不能确保快速的完成“粘页脚”的效果，那么还是要给大家分享本教程，写的不好还请各位大侠海涵！
一、页面效果
页面非常简单，注意亮线为火狐边缘，可以很清楚的看到，页脚灰色部分沉浸在页面底部。
二、实例讲解
①、代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
Bootstrap 粘页脚效果是网页设计中常见的一种布局技巧，它的主要目的是让页脚始终保持在页面底部，即使页面内容较少时也不会上移。在Bootstrap框架中实现这种效果，可以通过CSS样式和HTML结构来完成。以下是对这个效果的详细解释。
一、页面效果
粘页脚的效果通常是这样的：无论页面内容有多少，页脚总是固定在浏览器窗口的底部。当内容区域高度超过浏览器窗口高度时，页脚会出现在内容区的底部；当内容区高度不足时，页脚会紧贴浏览器窗口的底部，给用户一种整洁且一致的视觉体验。
二、实例讲解
1. HTML 结构
HTML 结构应该包含一个包裹所有内容的容器（`#wrap`），一个用于推高内容的空div（`#push`）以及一个页脚（`.footer`）。这样的结构允许我们通过CSS来实现页脚的粘性效果。
```html
<div id="wrap">
<div class="container project_choose">
<!-- 页面主要内容 -->
</div>
<div id="push"></div>
</div>
<div class="footer">
<!-- 页脚内容 -->
</div>
```
2. CSS 样式
CSS 部分是实现粘页脚的关键。我们需要设置`html`和`body`的高度为100%，确保整个页面可以充满浏览器窗口。然后，`#wrap`的最小高度设置为100%，并且添加一个负的底部外边距，其值等于页脚的高度。这样，当内容不足时，`#wrap`会自动拉伸到浏览器窗口高度，页脚则会被推至底部。
```css
html, body {
height: 100%;
}
#wrap {
min-height: 100%;
height: auto !important;
margin: 0 auto -200px; /* 页脚高度 */
}
#push {
height: 200px; /* 页脚高度 */
}
.footer {
border-top: 1px solid #e5e5e5;
color: #777;
padding: 19px 0;
background-color: #f5f5f5;
}
```
3. 解析代码
在提供的示例中，HTML结构包括了两个列布局，分别展示了发布产品和发布股权的功能。同时，页脚部分包含了公司介绍和联系方式等信息，具有一定的交互性和信息量。
4. 兼容性与注意事项
为了确保在不同的浏览器和设备上都能正常工作，需要考虑跨浏览器兼容性。Bootstrap本身已经对大部分主流浏览器做了优化，但仍然需要测试以确保在旧版本或非主流浏览器上的表现。
Bootstrap粘页脚效果是通过精心设计的HTML结构和CSS样式来实现的。它提供了一种简单而有效的方法，使页面的底部元素始终保持在视窗的底部，增强了用户体验。在实际开发中，可以根据项目需求进行微调，以适应各种布局和设计风格。
