CSS如何实现内容高度不够的时候底部(footer)自动贴底

这篇“CSS如何实现内容高度不够的时候底部(footer)自动贴底”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“CSS如何实现内容高度不够的时候底部(footer)自动贴底”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下面让我们一起来看看具体内容吧。

在 UI 切图过程中,页面往往由三个部分组成,头部、内容和底部。当页面的内容高度不够撑满屏幕,底部(footer)就跟着内容浮动上来了,小屏幕由于高度有限看不出来异常,但如果是大屏的话,底部下面变会多出很多空白,非常影响美观。

CSS如何实现内容高度不够的时候底部(footer)自动贴底

方案 1:Flex-Box

头部使用 position: sticky; 吸顶,再使用盒子( main )来包住内容( container > content )和底部( footer ),这个盒子设置最小高度为除头部外的剩余屏幕高度: min-height: calc(100vh - 50px); ,盒子里面使用弹性布局( flex: 1 1 auto; )让内容区域自动撑开,而底部保持不变( flex: 0 0 auto; ),这样就有了 内容不够时底部自动吸底,内容足够时底部自动下移 的效果。

示例:

<html>
<head>
<title>CSS实现底部(footer)贴底-方案1:Flex-Box</title>
<style>
body{
margin:0;
}
header{
height:50px;
background:#20c997;
position:sticky;
top:0;
}
main{
display:flex;
flex-flow:columnnowrap;
min-height:calc(100vh-50px);
}
.container{
flex:11auto;
}
.content{
background:#0d6efd;
}
footer{
flex:00auto;
background:#fd7e14;
}
</style>
</head>
<body>
<!--头部-->
<header>
header
</header>
<main>
<divclass="container">
<!--内容-->
<divclass="content">
content
</div>
</div>
<!--底部-->
<footer>
footer
</footer>
</main>
</body>
</html>

在线演示: https://codepen.io/mazeyqian/pen/rNeymdG

优点:底部高度可自由撑开。

缺点:低版本浏览器有兼容性(Flex-Box & Calc)问题。

方案 2:底部负距离 margin

内容区设置最小高度铺满页面,然后底部设置等高的负距离 margin 。

示例:

<html>
<head>
<title>CSS实现底部(footer)贴底-方案2:底部负距离`margin`</title>
<style>
body{
margin:0;
}
header{
height:50px;
background:#20c997;
position:sticky;
top:0;
}
.container{
min-height:calc(100vh-50px);
}
.content{
background:#0d6efd;
}
footer{
height:50px;
margin-top:-50px;
background:#fd7e14;
}
</style>
</head>
<body>
<!--头部-->
<header>
header
</header>
<divclass="container">
<!--内容-->
<divclass="content">
content
</div>
</div>
<!--底部-->
<footer>
footer
</footer>
</body>
</html>

感谢你的阅读,希望你对“CSS如何实现内容高度不够的时候底部(footer)自动贴底”这一关键问题有了一定的理解,具体使用情况还需要大家自己动手实验使用过才能领会,快去试试吧,如果想阅读更多相关知识点的文章,欢迎关注恰卡编程网行业资讯频道!

发布于 2021-03-17 20:52:52
收藏
分享
海报
0 条评论
164
上一篇:CSS3动画和HTML5新特性的示例分析 下一篇:CSS中line-height怎么实现继承
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码