html - 页面底部的中心页脚
问题描述
我试图在页面的中心底部放置一个页脚。我有以下 css 和 html,但我想不出一个好的方法。目前的问题是页脚在加载时超出了屏幕视图。讨厌这样,我认为这与页脚具有位置: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>
推荐阅读
- python-3.x - 如何在python中从文本文件创建数组
- java - 猜 7 次循环(Java 基础)
- html - 为什么我的背景图片没有上传?
- amazon-rds - Terraform eks 数据源 vpc 子网安全组
- android - 如何从gridview中将JSON数据传递到另一个屏幕
- tensorflow - 具有批范数的 GAN 非常奇怪,判别器和生成器都获得零损失
- python - Pytorch 模型不更新权重
- php - 作曲家未定义或环境
- reporting-services - 当 URL 由参数形成时,“转到 URL”不起作用
- javascript - 我无法根据 JavaScript [初学者] 中的条件编写 for...in 循环