用CSS实现页脚保持在网页底部怎样做?
Admin 2022-11-29 群英技术资�
在这篇文章中我们来了解一下“用CSS实现页脚保持在网页底部怎样做?”,一些朋友可能会遇到这方面的问题,对此在下文小编向大家来讲解,内容详细,易于理解,希望大家阅读完这篇能有收获哦,有需要的朋友就往下看吧!
如果你正在创建一个网页,你可能经常会想让它的页脚一直保持在最底部,无论中间的内容有多少。那么,有什么方法能快速做到么?本期我们将介绍四种css来解决让页脚保持在底部位置这个问题�
$ft-h:60px;
body {
min-height: 100vh;
position: relative;
box-sizing: border-box;
padding-bottom: $ft-h;
}
footer{
height: $ft-h;
width: 100%;
position: absolute;
bottom: 0;
left:0;
}
关键点在于让 footer
绝对定位置于最底部,� body
则需要通过 padding-bottom
给其空出一段在 footer
高度的距离,并且 body
的高度必须是最� 100vh
代表可以占满窗口高度,而且 body
还要 设置 box-sizing: border-box;
这样不会产生高度溢出的问题�
这个虽然有一丢丢麻烦,但是兼容性会好些因为,核心是padding
� absolute
这两个属性,这样很早到浏览器都可以支持到�
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
section{
flex: 1;
}
首先还是 body
使用 min-height
,确保伸展到屏幕的全高。然后,设置 flex-direction: column
让其变成为堆叠的块元素并保持整个文档流可以正常显示。最后,我们只要让内容区域的变成 flex: 1
,为了让内容区域自动填充慢整个区域。这样页脚自然而然的就到了最下面�
这个虽然有都比较喜欢使用,因为兼容� flex
目前来说还是比较不错的,而且代码量也很少,相对于也比较灵活�
body {
min-height: 100vh;
display: grid;
grid-template-rows: auto 1fr auto;
}
对你没看错,用了网格后代码量更少了。首先依然是要让 body
撑满屏幕高度。紧接着,我们使� grid-template-rows
来正确分隔内容。这个方法使用了小数单元计算可用空间并将其分配到多行。因此,它将填充页眉和页脚之间的所有可用空间。与上面� 弹性盒�
相似,也是让内容区域自动填充满整个区域高度,把页脚堆到最下面�
这个虽为简洁,但是吃亏� grid
布局受很多手机低版本的浏览器限制,但是展望网格布局应该以后会是开发者最喜欢的�
section{
min-height: calc(100vh - 60px - 60px);
}
现在代码更少了,只需要一句话就能做到了。众所周知,calc() 此CSS函数是允许在声明 CSS 属性值时执行一些计算的方法。我们只要是让内容区域的最小高度,是全屏高度然后去� header
� footer
的高度,这就大功告成啦~
这个最简洁,但是有两个问题比较突出,就是以后如果在增加一些块和更改布局时会稍微麻烦一点都要预先知道块的高度,其次也是在手机低版本的兼容上,有时候也是不尽人意�
其实与其说本期讲的是让页脚保证在底部,更不如说是css基础布局的实战练习,在我们开发中,各种状况都有可能出现,最后那种好与不好依然是要根据当前业务场景去灵活运用的�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
本文主要给大家分享一下css中的一些实用属性操作,对新手学习CSS有一定的帮助,使用起来也是事半功倍,那么接下来我们就具体的了解看看,都有哪些css属性操作吧�
这篇文章主要介绍了HTML5逐步分析实现拖放功能的方�,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
这篇文章主要介绍了HTML中图片不存在显示默认图片的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
SS中的居中出现无效的问题怎样解决?一些朋友在使用在使用text-align或者是margin�0 auto进行居中时,出现居中无效的情况,那么这个问题究竟有什么方法来解决呢?下面我们来看两个示例�
用户在浏览网站时经常会看到左侧有一种宣传栏,它不会随着鼠标滚动而不被用户看到,它会始终以页面的betway88w为参照物始终保持在左侧一个固定的位置,今天我们来做一下这个小例子,让�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078