如何解决页面底部的中心页脚
我正在尝试将页脚放置在页面的中央底部。我有以下 css 和 html,但我想不出一个好的方法。目前的问题是页脚在加载时落在屏幕视图之外。讨厌这样,我认为这与页脚具有 position:flex 的事实有关。但我设置了“绝对”它会搞砸(见第二张图)。
css
body {
background-color: white;
margin-top:3em;
margin-bottom:3vw;
margin-left:12vw;
margin-right:12vw;
font-family:Georgia;
font-size:1em;
color: #4D4D4D;
}
hr {
margin-bottom:3vw;
margin-top:10px;
height:0.08em;
border-width:0;
color:#231F20;
background-color:#231F20;
opacity: 0.2
}
a:link {
color: #0168DA;
text-decoration: none;
font-size:1em;
}
ul {
font-family:Georgia;
}
h3 {
margin-block-end: 0em;
}
p {
margin-block-start: 0.5em;
margin-block-end: 0.5em;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
margin-bottom: 4em;
}
* {
box-sizing: border-box;
}
@media only screen and (min-device-width: 480px) {
body {
margin-left:17vw;
margin-right:17vw;
}
}
/* other */
.menu {
padding-top: 3em;
margin-bottom: 5em;
}
.right {
text-align: right;
}
/* footer */
.footer-basic {
padding:40px 0;
margin-top: 16em;
background-color:#ffffff;
color:#4b4c4d;
bottom: 10px;
text-align: center;
}
.footer-basic ul {
padding:0;
list-style:none;
text-align:center;
font-size:15px;
line-height:1.6;
margin-bottom:0;
}
.footer-basic li {
padding:0 10px;
}
.footer-basic ul a {
color:inherit;
text-decoration:none;
opacity:0.8;
}
.footer-basic ul a:hover {
opacity:1;
}
.footer-basic .copyright {
margin-top:15px;
text-align:center;
font-size:13px;
color:#aaa;
margin-bottom:0;
}
.list-inline {
list-style: none;
padding: 0;
}
.list-inline > li {
display: inline;
margin: 0;
}
html
html>
<head>
{% load static %}
</head>
<body>
<p align="center">
<span style="color:#B02E25;font-size:1.5em;">A Month At A Time</span>
</p>
<div>
<img width="150" height="94" src="https://res.cloudinary.com/giaggi/image/upload/v1613837471/amonthatatime/images/general/calvinandhobbes.png">
</div>
{% for post in latest_posts %}
<div class="post">
<h3> {{post.title | safe}}
<br> <span style="opacity:0.6; font-size:0.8em">{{post.month | safe}} {{post.year | safe}} </span>
</h3>
<p style="opacity: 0.7;"> {{post.whatsapp | safe | truncatewords:50 }} </p>
<div class="right">
<a style="color:#B02E25;" href="/amonthatatime/{{post.year}}/{{post.month}}/" target="">Open</a>
</div>
</div>
<hr>
{% endfor %}
<div style="position:flex; bottom:0.5em;">
<div class="footer-basic">
<footer>
<ul class="list-inline" style="margin:3px" >
<li class="list-inline-item"><a style="font-family:Georgia;color: #0168DA;" href="/amonthatatime/subscribe">Subscribe</a></li>
</ul>
<!-- <p class="copyright">A month at a Time</p> -->
</footer>
</div>
</div>
</body>
</html>
解决方法
我希望结果符合你的需要
你可以使用这个,我只是改变下一个 CSS 行:
.footer-basic {
padding: 10px 0;
margin-top: 1em;
}
body {
background-color: white;
margin-top:3em;
margin-bottom:3vw;
margin-left:12vw;
margin-right:12vw;
font-family:Georgia;
font-size:1em;
color: #4D4D4D;
}
hr {
margin-bottom:3vw;
margin-top:10px;
height:0.08em;
border-width:0;
color:#231F20;
background-color:#231F20;
opacity: 0.2
}
a:link {
color: #0168DA;
text-decoration: none;
font-size:1em;
}
ul {
font-family:Georgia;
}
h3 {
margin-block-end: 0em;
}
p {
margin-block-start: 0.5em;
margin-block-end: 0.5em;
}
img {
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 1em;
margin-bottom: 4em;
}
* {
box-sizing: border-box;
}
@media only screen and (min-device-width: 480px) {
body {
margin-left:17vw;
margin-right:17vw;
}
}
/* other */
.menu {
padding-top: 3em;
margin-bottom: 5em;
}
.right {
text-align: right;
}
/* footer */
.footer-basic {
padding: 10px 0;
margin-top: 1em;
background-color:#ffffff;
color:#4b4c4d;
bottom: 10px;
text-align: center;
}
.footer-basic ul {
padding:0;
list-style:none;
text-align:center;
font-size:15px;
line-height:1.6;
margin-bottom:0;
}
.footer-basic li {
padding:0 10px;
}
.footer-basic ul a {
color:inherit;
text-decoration:none;
opacity:0.8;
}
.footer-basic ul a:hover {
opacity:1;
}
.footer-basic .copyright {
margin-top:15px;
text-align:center;
font-size:13px;
color:#aaa;
margin-bottom:0;
}
.list-inline {
list-style: none;
padding: 0;
}
.list-inline > li {
display: inline;
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<p align="center">
<span style="color:#B02E25;font-size:1.5em;">A Month At A Time</span>
</p>
<div>
<img width="150" height="94"
src="https://res.cloudinary.com/giaggi/image/upload/v1613837471/amonthatatime/images/general/calvinandhobbes.png">
</div>
<div class="post">
<h3> {{post.title | safe}}
<br> <span style="opacity:0.6; font-size:0.8em">{{post.month | safe}} {{post.year | safe}} </span>
</h3>
<p style="opacity: 0.7;"> {{post.whatsapp | safe | truncatewords:50 }} </p>
<div class="right">
<a style="color:#B02E25;" href="/amonthatatime/{{post.year}}/{{post.month}}/" target="">Open</a>
</div>
</div>
<hr>
<div style="position:flex; bottom:0.5em;">
<div class="footer-basic">
<footer>
<ul class="list-inline" style="margin:3px">
<li class="list-inline-item"><a style="font-family:Georgia;color: #0168DA;"
href="/amonthatatime/subscribe">Subscribe</a></li>
</ul>
<!-- <p class="copyright">A month at a Time</p> -->
</footer>
</div>
</div>
</body>
</html>
因此,实现此目的的一种方法是为页脚添加固定高度,然后为内容添加最小高度。像这样:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
min-height: calc(100vh - 4rem);
}
footer {
display: flex;
align-items: center;
justify-content: center;
height: 4rem;
}
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<main>
<p>Main content goes here</p>
</main>
<footer>
<p>Subscribe</p>
</footer>
</body>
</html>
这仅依赖于填充大部分页面的主要内容,并将页脚“推”到底部。这种方法的主要缺点是您需要在页脚上设置一个高度,这可能适合也可能不适合您的需要 - 这样您就可以将主要部分的高度设置为 calc(100vh - 4rem)
其中 {{1 }} 是页面的整个高度,减去页脚的高度,在这个例子中我做了 100vh
(但你可以随意设置)。
我没有费心把你的所有代码都放在那里,但我希望你能从这里解决。
确保在您的内容上使用 4rem
,以便随着您拥有更多内容而增长。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。