这篇文章将为大家详细讲解有关“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页面中实现底部固定的方式有多少种”的文章就介绍到这了,更多相关内容请搜索群英网络以前的文章或继续浏览下面的相关文章，希望大家以后多多支持群英网络！

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• AmazeUI中如何实现一个基本面板，代码是什么

  这篇文章主要介绍了AmazeUI 面板的实现示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• css中如何实现平均布局？方法是什么？

  css中如何实现平均布局？在实际的项目中，我们可能会遇到实现平均布局的需求，那么这个效果怎样做呢？我们可以使用负margin的方法来实现，接下来我们一起来看一个实现示例。

• CSS精灵图是什么，实现方式是怎样

  目录I.精灵图介绍II.精灵图的实现方式：拼出你的名字III.软件辅助定位I.精灵图介绍首先，我们先介绍一下什么是精灵图：先强调一点哈，精灵图和下面这个玩意儿没啥关系：它的名字是这

• 在CSS中让文字水平垂直居的做法是什么

  css设置文字水平垂直居中的方法1、新建一个html文件，命名为test.html，用于讲解css如何让文字水平和垂直都居中。在div内，使用span标签创建一行文字，用于测试。设置div的class属

• 在CSS中hover选择器的定义和用法是什么

  这篇文章主要介绍了CSS: hover选择器的使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧