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>屏幕 1：
屏幕 2：
页脚应与页面的下边缘保持一致，而不是与浏览器的下边缘保持一致。怎么了？
您已将身体的高度设置为 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>小智 5
如果您可以使用 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;
}
| 归档时间： |
|
| 查看次数： |
18057 次 |
| 最近记录： |