Html 在页面底部居中放置页脚_Html_Css_Footer

Html 在页面底部居中放置页脚

html css

Html 在页面底部居中放置页脚,html,css,footer,Html,Css,Footer,我试图在页面的中间和底部放置一个页脚。我有下面的css和html，但我想不出一个好的方法。目前的问题是页脚在加载时落在屏幕视图之外。我讨厌这一点，我认为这与页脚的位置有关：flex。但我设置了“绝对”，它会搞砸（见第二张图） css html html> {%load static%} 一次一个月 {最新发布的帖子的百分比%} {{post.title | safe}} {{post.month | safe}{{{post.year | safe}} {{post.whatsapp | s

我试图在页面的中间和底部放置一个页脚。我有下面的css和html，但我想不出一个好的方法。目前的问题是页脚在加载时落在屏幕视图之外。我讨厌这一点，我认为这与页脚的位置有关：flex。但我设置了“绝对”，它会搞砸（见第二张图）

css

html

html>
{%load static%}

一次一个月

{最新发布的帖子的百分比%}
{{post.title | safe}}

{{post.month | safe}{{{post.year | safe}}
{{post.whatsapp | safe | truncatewords:50}

{%endfor%}

我希望结果符合你的需要

您可以使用这个，我只需更改下一行CSS：

.footer-basic {
    padding: 10px 0;
    margin-top: 1em;
}

正文{
背景色：白色；
边缘顶端：3em；
利润底部：3vw；
左边距：12vw；
右边保证金：12vw；
字体系列：格鲁吉亚；
字号：1em；
颜色：#4d；
}
人力资源{
利润底部：3vw；
边缘顶部：10px；
高度：0.08em；
边框宽度：0；
颜色：231F20；
背景色：#231F20；
不透明度：0.2
}
a:链接{
颜色：#0168DA；
文字装饰：无；
字号：1em；
}
保险商实验室{
字体系列：格鲁吉亚；
}
h3{
边距块结束：0em；
}
p{
边缘块开始：0.5em；
边缘块端：0.5em；
}
img{
显示：块；
左边距：自动；
右边距：自动；
边缘顶部：1米；
边缘底部：4em；
}
* {
框大小：边框框；
}
@仅介质屏幕和（最小设备宽度：480px）{
身体{
左边距：17vw；
保证金权利：17vw；
}
}
/*其他*/
.菜单{
垫面：3em；
边缘底部：5em；
}
.对{
文本对齐：右对齐；
}
/*页脚*/
.页脚基本{
填充：10px0；
边缘顶部：1米；
背景色：#ffffff；
颜色：#4b4c4d；
底部：10px；
文本对齐：居中；
}
.页脚基本ul{
填充：0；
列表样式：无；
文本对齐：居中；
字体大小：15px；
线高：1.6；
页边距底部：0；
}
.页脚基本li{
填充：0 10px；
}
.页脚基本ul a{
颜色：继承；
文字装饰：无；
不透明度：0.8；
}
.footer基本ul a：悬停{
不透明度：1；
}
.footer基本。版权所有{
边缘顶部：15px；
文本对齐：居中；
字体大小：13px；
颜色：#aaa；
页边距底部：0；
}
.内联列表{
列表样式：无；
填充：0；
}
.list inline>li{
显示：内联；
保证金：0；
}



一次一个月

{{post.title | safe}}

{{post.month | safe}{{{post.year | safe}}
{{post.whatsapp | safe | truncatewords:50}

实现这一点的一种方法是在页脚上添加一个固定高度，然后在内容上添加一个最小高度。大概是这样的：

*{
保证金：0；
填充：0；
框大小：边框框；
}
主要{
最小高度：计算（100vh-4rem）；
}
页脚{
显示器：flex；
对齐项目：居中；
证明内容：中心；
身高：4rem；
}


主要内容在这里
订阅

在最后一个

div

尝试

style=“position:absolute；bottom:0；”

而不是

style=“position:flex；bottom:0.5em；”

。另外

position:flex

是一个错误的CSS。删除

页边距顶部：16em来自.footer basic。我不工作。页脚全部向左移动。（见更新的问题文本+图片）我能问一下你到底想做什么吗？您希望页脚始终位于底部（如粘滞），还是希望页脚被推到内容下方，至少推到屏幕底部边缘？您是希望“订阅”一词集中在底部，还是最终会有一个更大的页脚（我看到您在html中有一个列表）？你有你想要的外观设计吗？我想把“订阅”这个词推到页面底部。不粘。现在我只有一个单词，但如果我想在哪里有2个单词或3个单词，我希望他们在同一行，并在页面底部的中心（如文本：中间）推。这有意义吗？所以这基本上是第一个截图…但是这个词应该出现在屏幕上，而不是在屏幕外面，因为这是页面的结尾…但这是我用页边空白顶部做的一个修改…并没有真正把页脚放在底部，只是把它往下推一点。如果浏览器变的很高，它会变得一团糟，而不是真正做我需要的事情。这里订阅跳起来…我希望它留在页面底部。不起作用。在移动网络上，订阅仍然在屏幕之外。你是如何测试的？它对我有用。不要在这里使用代码片段进行测试，因为一旦您将chrome切换到mobile，屏幕大小将改变，但100vh值不会更新，并且您无法刷新页面而不丢失正在运行的代码片段。
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>


.footer-basic {
    padding: 10px 0;
    margin-top: 1em;
}