flex 底部固定_小猿圈网站页面底部固定的方法

网络发展到了今天，很多朋友对于网站已经不陌生了，但是当我们看网页时你注意到网站的底部了吗？虽然很少人会注意到他，但是如果不在底部的话，会很难看，今天小猿圈web前端讲师就为你介绍网站页面底部固定的方法。

方法一：footer高度固定+绝对定位

html

<div class="dui-container"><header>Header</header><main>Content</main><footer>Footer</footer>
</div>

css

.dui-container{
position: relative;
min-height: 100%;
}
main {
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
footer{
width: 100%;
position: absolute;
bottom: 0
}

方法二：在主体content上的下边距增加一个负值等于底部高度

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

css

html, body {
height: 100%;
}
main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
margin-top: -100px;
margin-bottom: -100px;
}
header, footer{
line-height: 100px;
height: 100px;
}

方法三：将页脚的margin-top设为负数

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

css

main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
}
header, footer{
line-height: 100px;
height: 100px;
}
header{
margin-bottom: -100px;
}
footer{
margin-top: -100px;
}

方法四：通过设置flex，将footer的margin-top设置为auto

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

css

body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,footer{
line-height: 100px;
height: 100px;
}
footer{
margin-top: auto;
}

方法五：通过函数calc()计算内容的高度

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

css

main{
min-height: calc(100vh - 200px); /* 这个200px是header和footer的高度 */
}
header,footer{
height: 100px;
line-height: 100px;
}

方法六：通过设置flexbox，将主体main设置为flex

html

<header>Header</header>
<main>Content</main>
<footer>Footer</footer>

css

body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
main{
flex: 1
}

小猿圈提醒大家合理利用自己每一分每一秒的时间来学习提升自己，不要再用"没有时间“来掩饰自己思想上的懒惰！趁年轻，使劲拼，给未来的自己一个交代！想学习IT编程类知识的可以到小猿圈网站去自学前端，里面有最新最全的视频以及专业的解答。

flex 底部固定_小猿圈网站页面底部固定的方法相关推荐

th:text为null报错_小猿圈web前端之vue-cli项目打包完成后运行文件路径报错问题
学习前端的小伙伴越来越多,问题也就越多,前面基础部分还好一些,特别是一到框架的时候,难住了一大部分人,今天小猿圈web前端讲师就为大家总结了vue-cli项目打包完成后运行文件路径报错问题,有兴趣的小 ...
java request 处理过程_小猿圈Java开发之从代码看spring mvc请求处理过程
原标题:小猿圈Java开发之从代码看spring mvc请求处理过程 Java作为编程界的常青树,有自己生存的独到之处,小猿圈java讲师今天就分享一个关于从代码看spring mvc请求处理过程,通 ...
vue 传参微信_小猿圈web前端之微信小程序页面间跳转传参方式总结
原标题:小猿圈web前端之微信小程序页面间跳转传参方式总结最近小程序发展的越来越快,很多大公司也在打造自己的小程序平台以及购物小程序等等,今天小猿圈web前端讲师就总结了关于微信小程序的知识点,首先 ...
前端鼠标一次移动半个像素_小猿圈分享2019年前端JavaScript面试题（三）
上篇文章小猿圈前端讲师为你分享了前端面试中js遇到的一些基础问题,接下来给大家讲解的就是前端基础和理论问题都有哪些,想学习web前端就来小猿圈自学吧,里面有全面的技术指导,还有专业的老师为你解答问题. ...
频率分布直方图组距如何确定_小猿圈Python开发之绘制频率分布直方图示例
现在人工智能越来越实用,甚至深入到千家万户,随之而来的就是python技术的火爆,今天小猿圈python讲师为你讲解一下绘制频率分布直方图示例,希望对于刚刚自学python的你有一定的帮助. 项目中在 ...
java length()函数_小猿圈介绍java函数式编码结构及优势
对于java大家都已经不陌生了吧,今天小猿圈Java讲师就分享一篇关于java函数式编码结构及优势的知识点,希望对于学习java的你有一定的帮助,想学习就需要积累. 探讨三种下一代JVM语言:Groo ...
java五子棋悔棋代码_小猿圈前端编写JS五子棋游戏
前段时间发的飞机大战的游戏很多小伙伴都私聊让再做个游戏,今天小猿圈web前端讲师为大家分享的是JS五子棋的游戏,想玩的小伙伴记得自己运行一下呦. JS五子棋游戏代码: 五子棋 canvas { dis ...
css怎么使元素绝对定位有过度效果_小猿圈web前端讲解div+css绝对定位和相对定位...
最近很多网友问我绝对定位和相对定位怎么区分,怎么使用?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么样的特性,可以做出什么样的效果呢?关于两者之间又有什么样的技巧呢?下面小猿圈w ...
router vue 回到顶部_小猿圈HTML5学习之基于iview的router常用控制方式
对于互联网发展的今天,IT行业慢慢变成大多数年轻人发展的目标,不仅前景好,薪资也是越来越高的,而web前端是行业中需要的技术,也促进了大多数朋友在学习html5,今天小猿圈讲师给你分享基于iview的 ...

flex 底部固定_小猿圈网站页面底部固定的方法

flex 底部固定_小猿圈网站页面底部固定的方法相关推荐

最新文章

热门文章