警告:本站服务器将于2020-7-10到期,不再续费,本站如果有大家需要的资料赶紧备份,谢谢!另:我会陆陆续续将本站一些文章放入github上,请关注我。
当前位置:W3Cbest前端开发>HTML/CSS>CSS多种方法实现页面底部固定

CSS多种方法实现页面底部固定

原创2018-10-11HTML/CSS/资源3770 次阅读 · 读完需要 8 分钟。

当我们在写页面时经常会遇到页面内容少的时候,footer会戳在页面中间或什么?反正就是不在最底部显示,反正就是很难看,下面要讲的布局就是解决如何使元素粘住浏览器底部,

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

html

<div class="dui-container">
<header>Header</header>
<main class="content">
<h1>使用position定位footer布局</h1>
<button id="add">Add Content</button>
</main>
<footer class="footer">
Footer
</footer>
</div>

CSS

.dui-container{
position: relative;
min-height: 100%;
}
header,main, footer{
padding: 0 calc(50% - 450px);
}
main {
padding-bottom: 100px;
}
header, footer{
font-size: 30px;
background-color: #333;
color: white;
line-height: 100px;
height: 100px;
}
footer{
width: 100%;
position: absolute;
bottom: 0
}

See the Pen position-sticky-footer by w3cbest.com (@w3cbest) on CodePen.

 

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

html

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

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;
}

See the Pen margin And padding-sticky-footer by w3cbest.com (@w3cbest) on CodePen.

 

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

html

<header>Header</header>
<main class="content">
<button id="add">添加内容试试</button>
</main>
<footer class="footer">
Footer
</footer>

CSS

main {
min-height: 100%;
padding-top: 100px;
padding-bottom: 100px;
}
header, footer{
font-size: 30px;
background-color: #333;
color: white;
line-height: 100px;
height: 100px;
}
header{
margin-bottom: -100px;
}
footer{
margin-top: -100px;
}

See the Pen footer负值-sticky-footer by w3cbest.com (@w3cbest) on CodePen.

 

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

html

<header>Header</header>
<main>
<h1>在主体content上的下边距增加一个负值等于底部高度</h1>
<button id="add">添加内容</button>
</main>
<footer>Footer</footer>

CSS

body{
display: flex;
min-height: 100vh;
flex-direction: column;
}
header,main, footer{
padding: 0 calc(50% - 450px);
}
header,footer{
font-size: 30px;
background-color: #333;
color: white;
line-height: 100px;
height: 100px;
}
footer{margin-top: auto;}

 

See the Pen flex and margin-sticky-footer by w3cbest.com (@w3cbest) on CodePen.

 

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

html代码

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

CSS代码

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

 

See the Pen calc-sticky-footer by w3cbest.com (@w3cbest) on CodePen.

 

方法六: 通过设置flexbox,将主体main设置为flex

关于flexbox还请查看具体怎么使用

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

CSS代码

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

 

See the Pen flex-sticky-footer by w3cbest.com (@w3cbest) on CodePen.

 

方法七: 使用grid布局

Html代码

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

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;
}

See the Pen grid-sticky-footer by w3cbest.com (@w3cbest) on CodePen.

 

方法八: display-*

html

<header>Header</header>
<button id="add">添加内容试试</button>
<footer class="footer">Footer</footer>

CSS

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

See the Pen display:table-sticky-footer by w3cbest.com (@w3cbest) on CodePen.

 

参考:https://css-tricks.com/couple-takes-sticky-footer/

赞(301) 打赏
未经允许不得转载:W3Cbest前端开发>CSS多种方法实现页面底部固定

相关推荐

发表评论