提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > CSS完成页面底部牢固的要领引见(附代码)【css教程】,html,css,前端,html5,css3

本篇文章给人人带来的内容是关于CSS完成页面底部牢固的要领引见(附代码),有肯定的参考价值,有须要的朋侪能够参考一下,愿望对你有所协助。

当我们在写页面时经常会碰到页面内容少的时刻,footer会戳在页面中间或什么?横竖就是不在最底部显现,横竖就是很丢脸,下面要讲的规划就是处理怎样使元素粘住浏览器底部,

要领一: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
}

要领七: 运用grid规划

Html代码

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

CSS代码

html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
.footer {
grid-row-start: 3;
grid-row-end: 4;
}

要领八: display-*

html

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

CSS

body {
  min-height: 100%;
  display: table;
  width: 100%;
}
main {
  display: table-row;
  height: 100%;
}

以上就是CSS完成页面底部牢固的要领引见(附代码)的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"CSS完成页面底部牢固的要领引见(附代码)【css教程】,html,css,前端,html5,css3"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线