本教程旨在解决当页面内容高度超过视口时，固定定位在底部的 div 遮挡其他内容的问题。我们将通过使用 Flexbox 布局，确保底部 div 始终位于页面底部，且不会覆盖动态高度的内容区域，从而提供更好的用户体验。
使用 Flexbox 实现底部固定且不遮挡内容的效果
当我们需要将一个 div 固定在页面底部，并且希望它不遮挡页面上的其他动态内容（例如手风琴组件）时，仅仅使用 position: fixed; bottom: 0; 可能会出现问题，特别是当内容高度超过视口时。一个更健壮的解决方案是利用 Flexbox 布局。
核心思想
Flexbox 布局允许我们轻松地控制页面元素的排列方式，并根据内容自适应调整。 通过将 body 元素设置为 Flex 容器，并设置 flex-direction: column，我们可以将页面内容按垂直方向排列。 关键在于使用 flex: 1 将主要内容区域（例如 <main> 元素）设置为弹性伸缩，使其占据剩余空间，从而将底部 div 推到页面底部。
具体实现步骤
-
将 body 元素设置为 Flex 容器：
body { display: flex; min-height: 100vh; /* 确保容器至少占据整个视口高度 */ flex-direction: column; /* 垂直排列子元素 */ margin: 0; /* 移除默认的 body margin */ }- display: flex; 启用 Flexbox 布局。
- min-height: 100vh; 确保 Flex 容器至少占据整个视口的高度，即使内容很少。
- flex-direction: column; 指定主轴方向为垂直方向，这意味着子元素将垂直排列。
- margin: 0; 移除浏览器默认的 body 边距，避免不必要的空白。
-
设置主要内容区域的弹性伸缩：
main { flex: 1; /* 占据剩余空间 */ }- flex: 1; 让 main 元素占据所有剩余的垂直空间。这会将底部 div 推到页面底部。flex: 1 是 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; 的简写。
-
创建页面结构：
<body> <header>HEADING....</header> <main> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita ullam aut veritatis sint similique saepe, molestiae doloremque assumenda nobis deleniti praesentium explicabo, quae iste tempora! Fuga facere autem dolorem cum? </p> </main> <footer> <p>Footer area</p> </footer> </body>- <header> 页眉区域，包含标题或其他头部内容。
- <main> 主要内容区域，包含动态内容（例如手风琴组件）。
- <footer> 页脚区域，包含底部固定内容。
-
添加样式（可选）：
header { background-color: silver; } main { background-color: deepskyblue; } footer { background-color: tomato; }这些样式仅用于演示目的，可以根据实际需求进行调整。
完整示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fixed Bottom Footer</title>
<style>
body {
margin: 0;
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1;
}
header {
background-color: silver;
padding: 10px;
}
main {
background-color: deepskyblue;
padding: 20px;
}
footer {
background-color: tomato;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>HEADING....</header>
<main>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita
ullam aut veritatis sint similique saepe, molestiae doloremque
assumenda nobis deleniti praesentium explicabo, quae iste tempora! Fuga
facere autem dolorem cum? Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Expedita ullam aut veritatis sint similique saepe,
molestiae doloremque assumenda nobis deleniti praesentium explicabo,
quae iste tempora! Fuga facere autem dolorem cum? Lorem ipsum dolor sit
amet, consectetur adipisicing elit. Expedita ullam aut veritatis sint
similique saepe, molestiae doloremque assumenda nobis deleniti
praesentium explicabo, quae iste tempora! Fuga facere autem dolorem
cum?
</p>
</main>
<footer>
<p>Footer area</p>
</footer>
</body>
</html>注意事项
- 确保 body 元素的 min-height 设置为 100vh，这样即使内容很少，页脚也会固定在视口底部。
- main 元素的 flex: 1 是关键，它会占据剩余空间，并将页脚推到页面底部。
- 根据实际需求调整 header、main 和 footer 的样式。
总结
通过使用 Flexbox 布局，我们可以轻松地实现底部固定且不遮挡内容的效果，从而提供更好的用户体验。这种方法比仅仅使用 position: fixed 更加灵活和健壮，尤其是在处理动态高度的内容时。 掌握 Flexbox 布局对于现代 Web 开发至关重要。
