如何使用 CSS 制作粘性页脚?
How to make a sticky footer using CSS?
我想将页脚放在页面底部。我试试这个
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
但是我的页脚越来越乱了。我的网站是用 WordPress 制作的。如果可能的话,我不想为此使用任何插件。我只想使用纯 CSS。
这里是CSS脚本
footer #bottom-footer{
background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
border-top: 5px solid #F80000;
text-align: left;
padding: 9px;
font-size: 13px;
}
.footer-wrap a{
color:#000000;
}
.footer-wrap a:hover{
color:#F80000;
}
.footer-logo a {
margin-bottom: 6px;
display: block;
}
.footer-socials {
float: left;
line-height: 0px;
}
.footer-socials a {
border-radius: 100%;
color: #ffffff;
display: inline-block;
font-size: 14px;
height: 30px;
line-height: 30px;
margin-left: 3px;
text-align: center;
vertical-align: middle;
width: 30px;
}
.footer-socials a.facebook {
background: none repeat scroll 0 0 #1f69b3;
}
.footer-socials a.twitter {
background: none repeat scroll 0 0 #43b3e5;
}
.footer-socials a.gplus {
background: none repeat scroll 0 0 #d84734;
}
.footer-socials a.youtube {
background: none repeat scroll 0 0 #df2126;
}
.ak-contact-address .socials a.pinterest {
background: none repeat scroll 0 0 #ff3635;
}
.footer-socials a.linkedin {
background: none repeat scroll 0 0 #1a7696;
}
.footer-socials .socials a.flickr {
background: none repeat scroll 0 0 #e1e2dd;
}
.footer-socials .socials a.vimeo {
background: none repeat scroll 0 0 #7fdde8;
}
.footer-socials .socials a.instagram {
background: none repeat scroll 0 0 #c8c5b3;
}
.footer-socials .socials a.tumblr {
background: #395976;
}
.footer-socials .socials a.rss {
background: none repeat scroll 0 0 #fbc95d;
}
.footer-socials .socials a.github {
background: none repeat scroll 0 0 #383838;
}
.footer-socials .socials a.stumbleupon {
background: none repeat scroll 0 0 #e94c29;
}
.footer-socials .socials a.skype {
background: none repeat scroll 0 0 #09c6ff;
}
.footer-socials .social-icons span {
cursor: pointer;
display: inline-block;
}
.footer-socials .socials i {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.tagcloud a{
font-size: 13px !important;
background: rgba(0,0,0,0.4);
padding: 8px 10px;
margin: 0 2px 4px 0;
display: inline-block;
line-height: 1;
}
.sidebar .tagcloud a{
background: #23A38F;
color: #FFF;
}
从不再可用的在线资源(已失效 link)实施的干净方法之后,页面所需的最少代码将是(注意 - 可能最好使用 #bottom-footer
footer #bottom-footer
用于选择页脚 - 这可能是问题的一部分):
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Bootstrap 有一个您可以使用的粘性页脚。
http://getbootstrap.com/examples/sticky-footer/
或者您可以只使用 CSS 和 jQuery:
https://css-tricks.com/snippets/css/sticky-footer/
希望对您有所帮助。
我在这里找到了答案
Modern Clean CSS “Sticky Footer”
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
这很完美。这是来自 W3SCHOOLS
的例子
https://www.w3schools.com/howto/howto_css_fixed_footer.asp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
一些使用 flex box CSS 和以下 HTML 结构的现代方法:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
方法 1:(固定高度页脚)将 display:flex
和 flex-direction:column
应用于 body
。将 flex:1
(flex-grow:1
) 应用于 main
元素。
主要元素将垂直增长以占据任何空白 space,从而使页脚紧贴底部。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
header {
background-color: #cffac7;
height:50px;
}
main {
background-color: #f8e2ff;
flex:1;
}
footer {
background-color: #fceec7;
height:50px;
}
<header></header>
<main></main>
<footer></footer>
方法 2:(固定高度页脚)将 display:flex
和 flex-direction:column
应用于 body
。应用margin-top:auto
footer
。
大功告成,因为 auto margins inside flex containers absorb all available free space,让页脚贴在底部。请注意,这不依赖于 main 具有任何高度或内容。在这种情况下,我们根本没有给 main 任何 flex 规则,因此它获得默认值 flex:initial
(flex: 0 1 auto
).
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
header {
background-color: #cffac7;
height:50px;
}
main {
background-color: #f8e2ff;
}
footer {
background-color: #fceec7;
height:50px;
margin-top:auto;
}
<header></header>
<main></main>
<footer></footer>
方法 3:(流体高度页脚)这实际上与 #1 中的技术相同,但元素没有固有高度。由于给定竞争元素的(无单位)flex-grow
值之间的比率,main
将以 header
和 footer
的五倍速率增长。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
header {
background-color: #cffac7;
flex:1;
}
main {
background-color: #f8e2ff;
flex:5;
}
footer {
background-color: #fceec7;
flex:1
}
<header></header>
<main></main>
<footer></footer>
使用 CSS 网格
的 2019 年工作解决方案
如果你在这里,那么你可能像我一样受苦太久了:)
这是一个可行的解决方案。这是我在这里用于我的网站的内容:
https://aleksandrhovhannisyan.github.io/
无论页面上有多少内容,您都可以通过导航到我网站域下的假 URL 来验证它是否有效:
我会让事情变得非常通用和可重复使用。下面是您需要的所有代码,基本 DOM 由固定顶部 navigation/navbar、主要内容区域和粘性页脚组成。
我推荐你运行并以全页模式查看它以验证它是否有效:
body {
display: grid;
/* Replace 80 with your footer height, or with auto for variable-height footers */
grid-template-rows: 1fr 80px;
/* These two are important */
min-height: 100vh;
position: relative;
}
#topnav {
background-color: black;
color: white;
/* Recommended by Google, but adjust as you see fit */
min-height: 64px;
position: fixed;
right: 100%;
top: 0;
width: 100%;
/* This is to ensure that it always appears above everything. */
z-index: 100;
left: 0;
}
#page-content {
grid-row: 1;
/* https://css-tricks.com/preventing-a-grid-blowout/ */
min-width: 0;
/* change as you see fit */
padding-bottom: 64px;
padding-top: 64px;
}
#page-footer {
background: black;
bottom: 0;
color: white;
display: flex;
grid-row: 2;
height: 80px;
position: absolute;
width: 100%;
}
<body>
<header>
<nav id="topnav">topnav stuff goes in here</nav>
</header>
<main id="page-content">
<h1>Page content goes here</h1>
</main>
<footer id="page-footer" class="container">
<div>Made by Name</div>
</footer>
</body>
我想将页脚放在页面底部。我试试这个
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
但是我的页脚越来越乱了。我的网站是用 WordPress 制作的。如果可能的话,我不想为此使用任何插件。我只想使用纯 CSS。
这里是CSS脚本
footer #bottom-footer{
background: none repeat scroll 0 0 #FFFFFF;
color: #000000;
border-top: 5px solid #F80000;
text-align: left;
padding: 9px;
font-size: 13px;
}
.footer-wrap a{
color:#000000;
}
.footer-wrap a:hover{
color:#F80000;
}
.footer-logo a {
margin-bottom: 6px;
display: block;
}
.footer-socials {
float: left;
line-height: 0px;
}
.footer-socials a {
border-radius: 100%;
color: #ffffff;
display: inline-block;
font-size: 14px;
height: 30px;
line-height: 30px;
margin-left: 3px;
text-align: center;
vertical-align: middle;
width: 30px;
}
.footer-socials a.facebook {
background: none repeat scroll 0 0 #1f69b3;
}
.footer-socials a.twitter {
background: none repeat scroll 0 0 #43b3e5;
}
.footer-socials a.gplus {
background: none repeat scroll 0 0 #d84734;
}
.footer-socials a.youtube {
background: none repeat scroll 0 0 #df2126;
}
.ak-contact-address .socials a.pinterest {
background: none repeat scroll 0 0 #ff3635;
}
.footer-socials a.linkedin {
background: none repeat scroll 0 0 #1a7696;
}
.footer-socials .socials a.flickr {
background: none repeat scroll 0 0 #e1e2dd;
}
.footer-socials .socials a.vimeo {
background: none repeat scroll 0 0 #7fdde8;
}
.footer-socials .socials a.instagram {
background: none repeat scroll 0 0 #c8c5b3;
}
.footer-socials .socials a.tumblr {
background: #395976;
}
.footer-socials .socials a.rss {
background: none repeat scroll 0 0 #fbc95d;
}
.footer-socials .socials a.github {
background: none repeat scroll 0 0 #383838;
}
.footer-socials .socials a.stumbleupon {
background: none repeat scroll 0 0 #e94c29;
}
.footer-socials .socials a.skype {
background: none repeat scroll 0 0 #09c6ff;
}
.footer-socials .social-icons span {
cursor: pointer;
display: inline-block;
}
.footer-socials .socials i {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.tagcloud a{
font-size: 13px !important;
background: rgba(0,0,0,0.4);
padding: 8px 10px;
margin: 0 2px 4px 0;
display: inline-block;
line-height: 1;
}
.sidebar .tagcloud a{
background: #23A38F;
color: #FFF;
}
从不再可用的在线资源(已失效 link)实施的干净方法之后,页面所需的最少代码将是(注意 - 可能最好使用 #bottom-footer
footer #bottom-footer
用于选择页脚 - 这可能是问题的一部分):
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
#bottom-footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
Bootstrap 有一个您可以使用的粘性页脚。
http://getbootstrap.com/examples/sticky-footer/
或者您可以只使用 CSS 和 jQuery:
https://css-tricks.com/snippets/css/sticky-footer/
希望对您有所帮助。
我在这里找到了答案
Modern Clean CSS “Sticky Footer”
html {
position: relative;
min-height: 100%;
}
body {
margin: 0 0 100px; /* bottom = footer height */
}
footer {
position: absolute;
left: 0;
bottom: 0;
height: 100px;
width: 100%;
}
这很完美。这是来自 W3SCHOOLS
的例子https://www.w3schools.com/howto/howto_css_fixed_footer.asp
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: red;
color: white;
text-align: center;
}
</style>
</head>
<body>
<h2>Fixed/Sticky Footer Example</h2>
<p>The footer is placed at the bottom of the page.</p>
<div class="footer">
<p>Footer</p>
</div>
</body>
</html>
一些使用 flex box CSS 和以下 HTML 结构的现代方法:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
方法 1:(固定高度页脚)将 display:flex
和 flex-direction:column
应用于 body
。将 flex:1
(flex-grow:1
) 应用于 main
元素。
主要元素将垂直增长以占据任何空白 space,从而使页脚紧贴底部。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
header {
background-color: #cffac7;
height:50px;
}
main {
background-color: #f8e2ff;
flex:1;
}
footer {
background-color: #fceec7;
height:50px;
}
<header></header>
<main></main>
<footer></footer>
方法 2:(固定高度页脚)将 display:flex
和 flex-direction:column
应用于 body
。应用margin-top:auto
footer
。
大功告成,因为 auto margins inside flex containers absorb all available free space,让页脚贴在底部。请注意,这不依赖于 main 具有任何高度或内容。在这种情况下,我们根本没有给 main 任何 flex 规则,因此它获得默认值 flex:initial
(flex: 0 1 auto
).
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
header {
background-color: #cffac7;
height:50px;
}
main {
background-color: #f8e2ff;
}
footer {
background-color: #fceec7;
height:50px;
margin-top:auto;
}
<header></header>
<main></main>
<footer></footer>
方法 3:(流体高度页脚)这实际上与 #1 中的技术相同,但元素没有固有高度。由于给定竞争元素的(无单位)flex-grow
值之间的比率,main
将以 header
和 footer
的五倍速率增长。
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin:0;
}
header {
background-color: #cffac7;
flex:1;
}
main {
background-color: #f8e2ff;
flex:5;
}
footer {
background-color: #fceec7;
flex:1
}
<header></header>
<main></main>
<footer></footer>
使用 CSS 网格
的 2019 年工作解决方案如果你在这里,那么你可能像我一样受苦太久了:)
这是一个可行的解决方案。这是我在这里用于我的网站的内容:
https://aleksandrhovhannisyan.github.io/
无论页面上有多少内容,您都可以通过导航到我网站域下的假 URL 来验证它是否有效:
我会让事情变得非常通用和可重复使用。下面是您需要的所有代码,基本 DOM 由固定顶部 navigation/navbar、主要内容区域和粘性页脚组成。
我推荐你运行并以全页模式查看它以验证它是否有效:
body {
display: grid;
/* Replace 80 with your footer height, or with auto for variable-height footers */
grid-template-rows: 1fr 80px;
/* These two are important */
min-height: 100vh;
position: relative;
}
#topnav {
background-color: black;
color: white;
/* Recommended by Google, but adjust as you see fit */
min-height: 64px;
position: fixed;
right: 100%;
top: 0;
width: 100%;
/* This is to ensure that it always appears above everything. */
z-index: 100;
left: 0;
}
#page-content {
grid-row: 1;
/* https://css-tricks.com/preventing-a-grid-blowout/ */
min-width: 0;
/* change as you see fit */
padding-bottom: 64px;
padding-top: 64px;
}
#page-footer {
background: black;
bottom: 0;
color: white;
display: flex;
grid-row: 2;
height: 80px;
position: absolute;
width: 100%;
}
<body>
<header>
<nav id="topnav">topnav stuff goes in here</nav>
</header>
<main id="page-content">
<h1>Page content goes here</h1>
</main>
<footer id="page-footer" class="container">
<div>Made by Name</div>
</footer>
</body>