如何用HTML和CSS实现作品集网站底部特定背景布局？

核心思路 #

将背景层与内容层分离：外层#about负责铺满页面宽度的背景，并延伸至页面底部；内层.abt-content保留原有内容的边距和卡片样式。

修改后的代码 #

HTML（无需调整，保持原有结构即可）

<section id="about">
    <div class="abt-content">
        <h2 class="abt-title">About Me 
            <i class="fa-regular fa-lightbulb"></i>
        </h2>
        <p class="abt-desc"></p>
    </div>
</section>

CSS（关键修改）

#about {
    /* 移除左右外边距，让背景铺满页面宽度 */
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0; /* 移除底部大间距，避免和页脚脱节 */
    padding: 80px 0;
    /* 设置你需要的背景色 */
    background-color: #f0f0f0;
    /* 确保背景至少覆盖剩余页面高度，需替换"顶部已占用高度"为实际值，比如导航栏高度 */
    min-height: calc(100vh - 80px);
}

.abt-content {
    background-color: #232946;
    padding: 50px 0;
    box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    /* 恢复内容的原有边距 */
    margin-left: 70px;
    margin-right: 5%;
}

.abt-title {
    color: #fffffe;
    text-align: center;
    margin-bottom: 10px;
    font-family: montserrat, Verdana, Geneva, Tahoma, sans-serif;
    font-size: 35px;
    font-weight: 700;
}

替代方案（Flex布局实现自动占满高度） #

如果页面整体采用Flex布局，可更灵活控制高度：

1. 给body添加基础样式：

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

2. 修改#about的样式：

#about {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 80px 0;
    background-color: #f0f0f0;
    flex: 1; /* 自动占满页面剩余空间 */
}

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