如何让bottom_ul固定在fixed footer上方并随页面缩放同步移动？

我正在搭建一个基础网站，为这个初级问题致歉，但我已经卡壳2天了。
我希望id为“bottom_ul”的底部标签栏位于footer上方，且无论页面尺寸如何变化都始终与footer保持相对位置。顶部的“top_ul”标签栏与header的配合完全正常。我已经把bottom_ul移到了页面底部，但无法在调整它的位置后，让它在页面缩放时不脱离footer固定不动（比如调整到合适位置后，缩放页面时它会停在原地，其他页面元素围绕它移动）。
我想要实现的是：缩放页面时，bottom_ul能像top_ul跟随header一样跟随footer。

用户当前代码 #

CSS代码 #

@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;
}

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>

解决方案 #

当前问题核心是#bottom_ul和.footer都使用position: fixed且bottom: 0，导致两者重叠，缩放时无法保持相对位置。要实现bottom_ul始终在footer上方并跟随其位置，可按以下步骤修改：

1. 调整HTML结构 #

将#bottom_ul移入footer内部，让两者天然保持相对位置关系，无需单独定位。同时修正重复id为class（HTML中id必须唯一）：

<footer class="footer">
    <div>
        <ul id="bottom_ul">
            <li class="footer_links"><a href="">About</a></li>
            <li class="footer_links"><a href="">FAQ</a></li>
            <li class="footer_links"><a href="">Scores</a></li>
            <li class="footer_links"><a href="">History</a></li>
            <li class="footer_links"><a href="">Content</a></li>
        </ul>
    </div>
    <nav>
        <ul id="footer_container">
            <li class="footer_content"> Copyright</li>
            <li class="footer_content"> Mailing: 12344 Potato Ave. <br> Veggieville, USA 15227</li>
            <li class="footer_content">Social Media Links</li>
        </ul>
    </nav>
</footer>

2. 修改CSS样式 #

• 移除#bottom_ul的position: fixed和bottom: 0，让它在footer内部正常排列
• 调整footer内边距，避免导航栏和底部内容重叠
• 将原重复id的样式选择器改为class：

/* 调整底部导航栏样式，移除固定定位 */
#bottom_ul {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 20px; /* 增加左右内边距，避免内容贴边 */
}

/* 修正选择器为class，适配HTML修改 */
.footer_links {
    border-style: solid;
    border-color: rgb(39, 11, 85);
    padding: 0 3px;
}

.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;
}

/* 调整footer内边距，容纳内部导航栏 */
.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background-color: rgb(39, 11, 85);
    color: white;
    text-align: center;
    padding: 10px 0;
    z-index: 0;
}

3. 额外优化 #

如果页面内容过长，给body添加底部内边距，避免内容被固定footer遮挡：

body {
    padding-bottom: 120px; /* 值大于footer总高度即可 */
}

修改完成后，#bottom_ul会始终位于footer内部上方，无论页面如何缩放，都会和footer保持相对位置，不会脱离。

内容的提问来源于stack exchange，提问作者Gabrielle