sticky footer布局，页面不足一屏底部footer固定在视窗底部，否则底部footer自动向下顺延

　　sticky布局在pc端和移动端都有很大的需求，下面列举一下常用并亲测的几种方法。

1.flex布局方式实现

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>兼容ie10+</title><style>*{margin: 0;padding: 0;}html,body{height: 100%;}.wrapper{height: 100%;display: flex;text-align: center;flex-direction:column;}.main{flex: 1;}.footer{height: 60px;background:#ccc;color: #fff;}</style>
</head>
<body><div class="wrapper"><div class="main">内容</div><div class="footer">footer</div></div>
</body>
</html>

这种方法在移动端经常使用，在pc端尤其是ie上，在ie10一下不兼容。

2.vh加clac 进行高度计算

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>兼容ie9+</title><style>*{margin: 0;padding: 0;}.wrapper{text-align: center;}.main{min-height: calc(100vh - 60px);}.footer{height: 60px;background: #ccc;}</style>
</head>
<body><div class="wrapper"><div class="main">内容</div><div class="footer">footer</div></div>
</body>
</html>

这种方法写法简单，更便于理解，本人最喜欢使用，兼容ie9+。

3.footer相对于父元素绝对定位

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>兼容ie7+</title><style>*{margin: 0;padding: 0;}html,body{height: 100%;}.wrapper{position: relative;min-height: 100%;text-align: center;}.main{padding-bottom: 60px;}.footer{position: absolute;left: 0;bottom: 0;height: 60px;background: #ccc;width: 100%;}</style>
</head>
<body><div class="wrapper"><div class="main">内容</div><div class="footer">footer</div></div>
</body>
</html>

实测兼容ie7+，适合pc端使用，正常的dom逻辑。

4.footer添加margin-top为负的dom高度

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>兼容ie7+</title><style>*{margin: 0;padding: 0;}html,body{height: 100%;}.wrapper{min-height: 100%;text-align: center;}.main{padding-bottom: 60px;}.footer{height: 60px;margin-top: -60px;background: #ccc;text-align: center;}</style>
</head>
<body><div class="wrapper"><div class="main">内容<br>内容<br>内容123<br></div></div><div class="footer">footer</div>
</body>
</html>

同意支持ie7+，不使用定位的方式，但是内容布局稍乱。

　　以上四种方法各有利弊，如果有疑问或更好的方式实现，请君共同探讨~~~

sticky footer布局，页面不足一屏底部footer固定在视窗底部，否则底部footer自动向下顺延相关推荐

html footer 布局,详解CSS经典布局之Sticky footer布局
何为Sticky footer布局? 我们常见的网页布局方式一般分为header(页头)部分,content(内容区)部分和footer(页脚)部分.当页头区和内容区的内容较少时,页脚区不是随着内容区 ...
对“粘连”footer布局的思考和总结
经典的"粘连"footer布局参考文章链接在文章末尾,简单的语言总结如下: 经典的"粘连"footer布局就是.我们有一块内容<main>.当&l ...
PC端移动端兼容响应式布局页面的制作
之前已经制作了PC端固定布局和移动端流体布局的页面,这次的任务就是将一个页面制作成PC端移动端兼容响应式布局页面,是页面能在不同屏幕大小下呈现处不同最佳显示状态. 主要的过程就是对: 1.将width ...
android vlayout 刷新,使用vlayout轻松构建复杂布局页面上拉加载
设计拿到了新项目的设计图,如图所示: 乐烹APP-首页.png 构建这个页面,如果没有滑动到底部加载更多功能,可以考虑用scollerview中一点点画布局.如果需要加载更多的话,就必须要考虑列表 ...
CSS和div布局页面
CSS和div布局页面 CSS和div布局页面一.什么是布局网页布局页面元素定位机制二.布局属性浮动清除浮动定位绝对定位相对定位固定定位一.什么是布局网页实质是块与块之间的位置 ...
安卓获取浏览器上网记录_Android 获取浏览器当前分享页面的截屏示例
今天在项目中碰见这么一个需求:获取 Chrome 浏览器分享时,页面的截屏.静下来一想,既然是分享,那么肯定得通过 Intent 来传递数据,如果真的能获取到 Chrome 分享页面时的截屏,那么 I ...
[html] 页面布局时你使用最多的标签是什么？div吗？在什么情况下会使用到div？
[html] 页面布局时你使用最多的标签是什么?div吗?在什么情况下会使用到div? 页面的的整体布局使用<header> <main> <aside> < ...
利用Div CSS(嵌套盒模型)布局页面完整实例流程
Div CSS(嵌套盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...
利用Div+CSS(嵌套+盒模型)布局页面完整实例流程
Div+CSS(嵌套+盒模型)布局页面完整实例流程: <!DOCTYPE html> <html> <head> <meta charset=" ...

sticky footer布局，页面不足一屏底部footer固定在视窗底部，否则底部footer自动向下顺延

sticky footer布局，页面不足一屏底部footer固定在视窗底部，否则底部footer自动向下顺延相关推荐

最新文章

热门文章