wordpress footer置底

/* 通过calc()函数让内容区块自动伸缩 */
.my-body{min-height: calc(71.7vh - 80px);
}
footer{height:50px;
}

参考：https://www.jianshu.com/p/6efe2c76a2dd

当我们要设置网页中的footer置底（sticky footer），我们可以这样办

body元素内的结构代码如下

<body><div class="main"><ul><li>啦啦啦啦</li><li>啦啦啦啦</li><li>啦啦啦啦</li></ul></div><footer><ul><li>联系电话</li><li>请拨打111</li></ul></footer>
</body>

方式一:

<style>footer{position:absolute;bottom:0;}
</style>

但是当我们的内容区块过多超过一屏时,就会出现footer不会随着内容往后移(不再置底)的问题

接下来的两种方式就能解决当内容过多时,footer永远都置底

方式二：使用calc()设置内容高度

<style>*{margin:0;padding:0;}/* 通过calc()函数让内容区块自动伸缩 */.main{min-height: calc(100vh - 80px);}footer{height:50px;}
</style>

上面的80px=30px+50px，是因为假设内容区块和footer的间距为30px，footer的高度是50px. 只需min-height: calc(100vh - 80px)一句话，我们就可以计算出内容区块的自动伸缩高度，从而让footer置底

注意,calc()使用加减法时要当心，记得在+,-号的前后加一个空格。这样做的原因是在未来我们在calc()函数内部可能会用到关键字,为了到时候能区别开-是关键字的连字符还是运算符减号

方式三：使用Flexbox弹性盒子布局

<style>*{margin:0;padding:0;}footer ul{list-style-type: none;}/*Flexbox弹性盒子，灵活解决*/body{display:flex;flex-flow:column;min-height:100vh;//100%;}.main{flex:1;}
</style>

其中，把flex设置为一个大于0的值，比如flex:1，实现了内容区块自动伸展并占满所有的可用空间
注意，响应式网页设计时，

vh,vw跟着显示窗口（视图）的宽度或高度，而不是父元素的宽度或高度
vw:viewport width，1vw相当于显示窗口宽度的1%
vh:viewport height，1vh相当于显示窗口高度的1%
兼容性：IE9+，chrome/firefox/safari/opera支持，[iOS]safari 8+支持，[Androidbrowser4.4+支持，chrome for android39支持

利用Flexbox弹性盒子布局，仅用四行代码，就实现了footer置底

作者：鱼娟note
链接：https://www.jianshu.com/p/6efe2c76a2dd
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

wordpress footer置底相关推荐

CSS 五种方式实现 Footer 置底
CSS 五种方式实现 Footer 置底页脚置底(Sticky footer) 就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网 ...
footer.php置底,CSS五种方式实现Footer置底
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部: 但如果网页内容不够长,置底的页脚就 ...
CSS五种方式实现 Footer 置底
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部.当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部:但如果网页内容不够长,置底的页脚就会保 ...
footer.php置底,详解CSS五种方式实现Footer置底
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部. 当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部:但如果网页内容不够长,置底的页脚就会 ...
footer置底的几种方式
/* 通过calc()函数让内容区块自动伸缩 */ .my-body{min-height: calc(71.7vh - 80px); } footer{height:50px; } 参考 :http ...
css实现页面底部置底（转载）
页脚置底(Sticky footer)就是让网页的footer部分始终在浏览器窗口的底部.当网页内容足够长以至超出浏览器可视高度时,页脚会随着内容被推到网页底部:但如果网页内容不够长,置底的页脚就会保 ...
ListBox滚动条置底
置底前: 添加以下代码: listBox1.TopIndex = listBox1.Items.Count - (int)(listBox1.Height / listBox1.ItemHeight) ...
子div在父div中置底
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
flash背景透明、置底、禁止放大右键菜单
右键菜单 Stage.showMenu = false; flash透明: 参数:wmode transparent flash置底: <param name="wmode ...

wordpress footer置底

方式一:

方式二：使用calc()设置内容高度

方式三：使用Flexbox弹性盒子布局

wordpress footer置底相关推荐

最新文章

热门文章