CSS:如何将页脚附加到页面的底部
问题描述:
我想将页脚附加到页面的底部。为了做到这一点,我使用了其他类似主题中推荐的绝对位置。但是由于未知原因,页脚的行为就好像它是固定的,而不是绝对的。CSS:如何将页脚附加到页面的底部
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}
header {
background: rgba(150, 150, 150, 0.5);
border-bottom: solid 1px;
width: 100%;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
main {
padding-top: 5px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 60px;
}
footer {
border-top: solid 1px;
background: rgba(150, 150, 150, 0.5);
width: 100%;
height: 40px;
padding-top: 10px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Index</title>
</head>
<body>
<header>
This is header
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
</main>
<footer>
This is footer
</footer>
</body>
</html>
页脚应该坚持与页面的下边缘,而是仍然坚持使用浏览器的下边缘。怎么了?
答
您已将身高设置为100%,因此您的身体只会与视口一样高。尝试使用min-height
对身体(也相对位置添加到体):
html {
height: 100%;
}
body {
position: relative;
margin: 0;
padding: 0;
min-height: 100%;
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}
header {
background: rgba(150, 150, 150, 0.5);
border-bottom: solid 1px;
width: 100%;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
main {
padding-top: 5px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 60px;
}
footer {
border-top: solid 1px;
background: rgba(150, 150, 150, 0.5);
width: 100%;
height: 40px;
padding-top: 10px;
position: absolute;
bottom: 0;
left: 0;
text-align: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Index</title>
</head>
<body>
<header>
This is header
</header>
<main>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde sunt, eaque optio id nostrum ullam voluptatum incidunt modi autem nulla nihil, voluptatibus iusto consectetur. Est quas libero illum dolore dicta?</p>
</main>
<footer>
This is footer
</footer>
</body>
</html>
答
无需指定位置的页脚,也卸下底部和左侧。您需要指定每个部分的高度(以%表示)。试试下面的CSS,
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: "Times New Roman", Times, serif;
font-size: 20px;
}
header {
height:10%;
background: rgba(150,150,150,0.5);
border-bottom: solid 1px;
width: 100%;
text-align: center;
padding-top: 20px;
padding-bottom: 20px;
}
main {
height:80%;
padding-top: 5px;
padding-left: 100px;
padding-right: 100px;
padding-bottom: 60px;
}
footer {
height:10%;
border-top: solid 1px;
background: rgba(150,150,150,0.5);
width: 100%;
height: 40px;
padding-top: 10px;
text-align: center;
}
这里,如果在大或有人屏幕尺寸缩小屏幕,或者如果在页面内容非常少,页脚将始终保持在页面的底部。
答
如果您可以使用flexbox,那就是您的解决方案。看看这里的CSS技巧 - 你不需要更多。 https://css-tricks.com/couple-takes-sticky-footer/
HTML:
<body>
<div class="content">
content
</div>
<footer class="footer"></footer>
</body>
CSS:
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
为什么不直接使用'位置:relative'? – Tom
http://plnkr.co/edit/o5aTdu4iLGSVIWxi3sUu看看这个。只需删除3条CSS规则,并让页脚自然移动到页面底部 – Bramastic
@ thebluefox,因为如果内容不填充屏幕,那么页脚不会位于视口的底部,我认为OP是想要一个粘性页脚,它将位于内容底部或屏幕底部,以较大者为准 – Pete