CSS Footer溢出问题：窗口缩小时内容超出屏幕求助

我是CSS新手，制作了一个Footer组件，遇到如下问题：当缩小浏览器窗口时，Footer内的内容会消失并超出屏幕边界。我暂时不需要实现响应式布局，仅希望所有内容都能保持在屏幕可视范围内，恳请指出问题所在，谢谢。

注：我暂时不打算做响应式处理，只希望能在屏幕边界内看到所有内容。

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>footer trial</title>
</head>
<body>

    <footer>
        <div class="footer">
            <div class="table1 tables">
                <h2 class="table-title">ABOUT</h2>
                <p class="about">Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> Odit impedit molestiae amet ab maxime saepe qui est<br>, temporibus voluptatibus eaque nihil, ut, omnis sit fugiat cupiditate explicabo. Repellat totam nisi incidunt.<br> Nulla nisi officiis ex, facilis delectus modi, dolor numquam consequuntur aspernatur,<br> harum autem perferendis iure ab! Praesentium, ea corrupti!</p>
            </div>
            <ul>

            <div class="table2 tables">
                <h2 class="table-title">INFORMATION</h2>
                <nav class="table-links">
                    <li><a href="#" class="table-link">table-link1</a></li>
                    <li><a href="#" class="table-link">table-link2</a></li>
                    <li><a href="#" class="table-link">table-link3</a></li>
                </nav>
            </div>

            <div class="table3 tables">
                <h2 class="table-title">CATALOGS</h2>
                <nav class="table-links">
                    <li><a href="#" class="table-link">table-link1</a></li>
                    <li><a href="#" class="table-link">table-link2</a></li>
                    <li><a href="#" class="table-link">table-link3</a></li>
                </nav>
            </div>

            <div class="table4 tables">
                <h2 class="table-title">SITEMAP</h2>
                <nav class="table-links">
                    <li><a href="#" class="table-link">table-link1</a></li>
                    <li><a href="#" class="table-link">table-link2</a></li>
                    <li><a href="#" class="table-link">table-link3</a></li>
                </nav>
            </div>

            <div class="table5 tables">
                <h2 class="table-title">CONTACT</h2>
                <p class="about">Lorem ipsum dolor sit amet consectetur adipisicing elit.<br> Odit impedit molestiae amet ab maxime saepe qui est<br>, temporibus voluptatibus eaque nihil, ut, omnis sit fugiat cupiditate explicabo. Repellat totam nisi incidunt.<br> Nulla nisi officiis ex, facilis delectus modi, dolor numquam consequuntur aspernatur,<br> harum autem perferendis iure ab! Praesentium, ea corrupti!</p>
            </div>

            </ul>
        </div>
    </footer>
    <div>
        <a href="#" class="copyright"> all rights reserved 2022</a>
    </div>
    
</body>
</html>

原始CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    list-style: none;
}

body {
    position: fixed;
    width: 100%;
    left: 0px;
    bottom: 0px;
}

.footer {
    background-color: rgb(4, 97, 97);
    color: #fff;
    gap: 15rem;
    padding: 20px;
    width: 100%;
    display: flex;
    justify-content:flex-start;
    margin-left: auto;
    margin-right: auto;
}

ul {
    gap: 7rem;
    display: flex;
    justify-content:space-evenly;
}

.about {
    width: 400px;
    text-align: justify;
    margin-left: auto;
}

.table1 {
    margin-left: 5rem;
    margin-bottom: 2rem;
}

.table-title {
    color: rgb(4, 224, 151);
    line-height: 3rem;
    margin-bottom: 1rem;
}

.table-links {
    text-align: center;
    line-height: 2rem;
    font-weight: 400;

}

.table-link {
    color: #fff;
    text-align: center;
}

.copyright {
    background-color: rgb(5, 120, 124);
    color: #fff;
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content:center;
    word-spacing: 0.24rem;

}

导致内容超出屏幕的核心原因：

• body的fixed定位：设置position: fixed后，body宽度固定为初始视口宽度，窗口缩小后无法自适应，直接引发内容溢出。
• 固定尺寸与间距：.footer和ul使用固定gap值，.about设置固定宽度400px，当视口宽度小于元素总宽度时，内容必然超出边界。
• 无溢出控制：未给容器添加溢出处理规则，超出部分直接被隐藏或移出屏幕。

无需复杂响应式调整，只需修改以下两点即可让所有内容保持在可视范围内：

1. 移除body的position: fixed，恢复正常文档流布局，让页面能随窗口宽度自适应。
2. 给.footer添加overflow-x: auto，当内容超出容器宽度时显示横向滚动条，通过滚动即可查看全部内容。

修改后的CSS代码 #

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    list-style: none;
}

/* 移除fixed定位，恢复正常文档流 */
body {
    width: 100%;
}

.footer {
    background-color: rgb(4, 97, 97);
    color: #fff;
    gap: 15rem;
    padding: 20px;
    width: 100%;
    display: flex;
    justify-content:flex-start;
    margin-left: auto;
    margin-right: auto;
    /* 添加横向滚动，内容超出时显示滚动条 */
    overflow-x: auto;
    /* 可选：优化滚动条样式，让它更美观 */
    scrollbar-width: thin;
}

ul {
    gap: 7rem;
    display: flex;
    justify-content:space-evenly;
}

.about {
    width: 400px;
    text-align: justify;
    margin-left: auto;
}

.table1 {
    margin-left: 5rem;
    margin-bottom: 2rem;
}

.table-title {
    color: rgb(4, 224, 151);
    line-height: 3rem;
    margin-bottom: 1rem;
}

.table-links {
    text-align: center;
    line-height: 2rem;
    font-weight: 400;

}

.table-link {
    color: #fff;
    text-align: center;
}

.copyright {
    background-color: rgb(5, 120, 124);
    color: #fff;
    padding: 10px;
    width: 100%;
    display: flex;
    justify-content:center;
    word-spacing: 0.24rem;
    /* 让版权栏始终固定在底部，不随滚动条移动 */
    position: sticky;
    bottom: 0;
}

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