尝试将 div 附加到固定页脚

Question

我正在尝试一个非常基本的网站，所以我对青少年的问题表示歉意，但我已经被困了两天并且碰壁了。

下部选项卡（“bottom_ul”）应位于页脚顶部并与页脚保持在一起，无论页面大小如何。当我使用顶部选项卡（“top_ul”）时，它们工作得很好。我已经设法将选项卡移至底部，但我希望它们向上移动，但我不知道如何向上移动它们，而不会将它们粘在新位置（例如，如果我将它们“恰到好处”定位）然后调整页面大小，它们保持在原位，而页面的其余部分在它们周围移动（如果有意义的话）。

当我调整页面大小时，我希望 Bottom_ul 与页脚保持一致，就像 top_ul 与页眉一样。

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,700;1,300&family=Luckiest+Guy&display=swap');
#mainheader {
  background-color: rgb(39, 11, 85);
  color: white;
  width: 100%;
  height: 100px;
  text-align: center;
  font-size: 60px;
  word-spacing: 70px;
  position: fixed;
  font-family: 'Luckiest Guy', cursive;
  margin: 0px;
  padding: 0px 0px 30px 0px;
  top: 0;
  left: 0px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#top_ul {
  position: relative;
  margin-top: 120px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

li {
  float: left;
  display: inline;
  font-family: "Courier New", monospace;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: white;
}

#header_links,
#footer_links {
  border-style: solid;
  border-color: rgb(39, 11, 85);
  padding: 0px 0px 0px 3px;
}

#header_links:hover,
#footer_links:hover {
  background-color: rgb(39, 11, 85);
  color: white;
}

#bottom_ul {
  position: fixed;
  /*margin-top: 530px;*/
  display: flex;
  justify-content: space-between;
  width: 100%;
  /*flex: 0 1 auto;
  top: 0;*/
  bottom: 0;
  z-index: 1;
}

#footer_content {
  margin: 10px 150px 10px 100px;
  text-align: center;
  float: left;
  display: inline;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgb(39, 11, 85);
  color: white;
  text-align: center;
  padding: 10px;
  z-index: 0;
}

<div>
  <ul id="bottom_ul">
    <li id="footer_links"><a href="">About</a></li>
    <li id="footer_links"><a href="">FAQ</a></li>
    <li id="footer_links"><a href="">Scores</a></li>
    <li id="footer_links"><a href="">History</a></li>
    <li id="footer_links"><a href="">Content</a></li>
  </ul>
</div>
<footer class="footer">
  <nav>
    <ul id="footer_containter">
      <li id="footer_content">copyright info and such</li>
    </ul>
  </nav>
</footer>

HTML： ````

    <div>
        <ul id="bottom_ul">
            <li id="footer_links"><a href="">About</a></li>
            <li id="footer_links"><a href="">FAQ</a></li>
            <li id="footer_links"><a href="">Scores</a></li>
            <li id="footer_links"><a href="">History</a></li>
            <li id="footer_links"><a href="">Content</a></li>
        </ul>
    </div>

<footer class="footer">
        <nav>
            <ul id="footer_containter">
                <li id="footer_content"> Copyright</li>
                <li id="footer_content"> Mailing: 12344 Potato Ave. <br> Veggieville, USA 15227</li>
                <li id="footer_content">Social Media Links</li>
            </ul>
        </nav>
</footer>

Answer 1

是否有任何原因导致将

bottom_ul

放在页脚内对您不起作用？

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,700;1,300&family=Luckiest+Guy&display=swap');
#mainheader {
  background-color: rgb(39, 11, 85);
  color: white;
  width: 100%;
  height: 100px;
  text-align: center;
  font-size: 60px;
  word-spacing: 70px;
  position: fixed;
  font-family: 'Luckiest Guy', cursive;
  margin: 0px;
  padding: 0px 0px 30px 0px;
  top: 0;
  left: 0px;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#top_ul {
  position: relative;
  margin-top: 120px;
  display: flex;
  justify-content: space-between;
  width: 100%;
}

li {
  float: left;
  display: inline;
  font-family: "Courier New", monospace;
}

li a {
  display: block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  color: white;
}

#header_links,
#footer_links {
  border-style: solid;
  border-color: rgb(39, 11, 85);
  padding: 0px 0px 0px 3px;
}

#header_links:hover,
#footer_links:hover {
  background-color: rgb(39, 11, 85);
  color: white;
}

#footer_content {
  margin: 10px 150px 10px 100px;
  text-align: center;
  float: left;
  display: inline;
}

#bottom_ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: rgb(39, 11, 85);
  color: white;
  text-align: center;
  padding: 10px;
}

<footer class="footer">
  <ul id="bottom_ul">
    <li id="footer_links"><a href="">About</a></li>
    <li id="footer_links"><a href="">FAQ</a></li>
    <li id="footer_links"><a href="">Scores</a></li>
    <li id="footer_links"><a href="">History</a></li>
    <li id="footer_links"><a href="">Content</a></li>
  </ul>
  <nav>
    <ul id="footer_containter">
      <li id="footer_content">copyright info and such</li>
    </ul>
  </nav>
</footer>

旁注： 通常不建议使用

ID

在 CSS 中设置多个元素的样式，因为 ID 在页面中是唯一的。我建议您使用类名来为元素分配自定义样式，而不是按照建议的

ID

这里。