<footer> 位于两个 s 之间的页面中间<div>

Question

我创建了一个网站，主页上的页脚在页面底部是可以的。但是其他页面的页脚在页面的中间。在这个页面上，实际上是两个并排排列的div，看起来页脚就在它们之间。我已经尝试了我在其他类似问题上发现的一切(我的意思是位置：绝对、相对、固定)，但没有什么能移动页面底部的页脚。我是HTML和CSS的初学者，所以如果我的代码中有更多问题，我很抱歉。

这是我的html代码：

<div class="kontaktujte_nas">
<form class="kontaktni_formular" action="kontaktni_formular.php" method="POST">
<label for="jmeno">Celé jméno</label>
<input type="text" id="jmeno" name="jmeno" placeholder="Jan Novák">
<label for="email">Váš Email</label>
<input type="email" id="mail" name="mail" placeholder="[e-mail]">
<label for="predmet">Předmět</label>
<input type="text" id="predmet" name="predmet">
<label for="zprava">Zpráva</label>
<textarea id="zprava" name="zprava"></textarea>
<button type="submit" name="odeslat">ODESLAT</button>
</form>
<div class="kontaktni_informace" style="background-image: url(assets/icons/adresa.png);">
<span class="k_informace">Horní Domaslavice 293, 73951</span>
</div>
<div class="kontaktni_informace" style="background-image: url(assets/icons/mail.png);">
<span class="k_informace">[e-mail]</span>
</div>
</div>

还有我的css：

body {
background-color: #212121;
}
.kontaktni_informace {
width: 40%;
float: right;
background-color: black;
background-repeat: no-repeat;
display: block;
margin-top: 40px;
}
.k_informace {
font-family: CovesLight;
font-size: 18px;
font-weight: bold;
padding: 8px 0px 8px 45px;
display: block;
color: #888888;
}
.kontaktujte_nas {
width: 50%;
margin: 0px auto;
padding-top: 40px;
display: block;
}
.kontaktni_formular {
font-family: TeXGyreAdventorRegular;
float: left;
width: 40%;
margin-top: 0px;
}
.kontaktni_formular input, textarea {
display: block;
width: 100%;
font-size: 16px;
padding: 7.5px;
border: 4px solid #888888;
}
.kontaktni_formular label {
display: block;
padding: 15px 0px 2.5px;
text-transform: uppercase;
font-size: 16px;
color: #ffffff;
}
.kontaktni_formular button {
font-family: TeXGyreAdventorRegular;
font-size: 18px;
margin-top: 15px;
padding: 5px 10px;
cursor: pointer;
margin-right: auto;
margin-left: auto;
display: block;
float: right;
}
.page_title {
margin-top: 0px;
text-align: center;
}
.title span {
font-size: 48px;
font-family: TeXGyreAdventorRegular;
color: #ffffff;
letter-spacing: 5px;
background: rgba(0, 0, 0, 0.5);
padding: 10px;
}
footer {
font-family: TeXGyreAdventorRegular;
text-align: center;
background-color: #111111;
padding: 5px;
color: #ffffff;
width: 100%;
}
.copyright {
font-weight: bold;
text-decoration: none;
color: #ffffff;
}

Answer 1

尝试将overflow: auto;添加到.kontaktujte_nas

Answer 2

您可能想要这样的东西：https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

通过谷歌搜索"；页面底部的页脚")

Answer 3

我相信你的问题已经解决了。

但快速浏览一下你的网站，我认为这可能会对你现在和永远有所帮助：

1. 试着遵循语义结构，例如，让header标签像处理页脚一样处理标题，让main标签处理剩余内容，例如side，等等

所以基本上，我看到你有一些导航元素，但它们不在header=>nav＝>ul，让页面顶部的导航元素进入标题标签，让lis进入ul标签，让ul进入导航标签，例如：

<header>  
<nav>
<ul>
<li>
<a href=".../home">
Home
</a>
</li>
</ul>
</nav>
</header>

遵循标准结构的原因是，他们在构建无障碍工具(如残疾人屏幕阅读器)时遵守了一条规则。如果你不遵循这个标准，你会耗尽自己的精力——要么不做，要么做得很强制性。

总之，正文包含页眉、正文和页脚。

编码快乐，欢呼