在前端开发中，实现一个垂直的三栏布局，其中第一栏固定在顶部，中间栏铺满剩余空间，第三栏固定在底部，可以使用多种方法。以下是一个使用HTML和CSS实现这种布局的示例：
HTML部分
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>垂直三栏布局</title><link rel="stylesheet" href="styles.css">
</head>
<body><div class="container"><header class="top-bar">顶部栏</header><main class="middle-content">中间栏（铺满剩余空间）</main><footer class="bottom-bar">底部栏</footer></div>
</body>
</html>
CSS部分（styles.css）
html, body {height: 100%;margin: 0;padding: 0;
}.container {display: flex;flex-direction: column;height: 100%;
}.top-bar {background-color: #f8b400; /* 示例颜色 */padding: 20px;text-align: center;flex: none; /* 固定高度 */
}.middle-content {background-color: #4caf50; /* 示例颜色 */flex: 1; /* 铺满剩余空间 */display: flex;align-items: center;justify-content: center;padding: 20px;overflow-y: auto; /* 允许垂直滚动 */
}.bottom-bar {background-color: #1e90ff; /* 示例颜色 */padding: 20px;text-align: center;flex: none; /* 固定高度 */
}
解释
-
HTML部分：
- 使用
<div class="container">作为最外层的容器，里面包含三个子元素：<header class="top-bar">，<main class="middle-content">，和<footer class="bottom-bar">。
- 使用
-
CSS部分：
html, body：设置高度为100%，移除默认的边距和内边距。.container：使用flex-direction: column将容器设置为垂直方向的Flexbox布局，并设置高度为100%。.top-bar和.bottom-bar：设置固定高度（使用flex: none），并添加一些内边距和背景颜色，以便更清楚地看到它们的位置。.middle-content：使用flex: 1使其占据剩余的所有空间，并添加一些内边距和背景颜色。同时，overflow-y: auto允许内容过多时垂直滚动。
这种方法利用了Flexbox的强大功能，使得布局既简单又灵活。你可以根据实际需要调整颜色、内边距等样式。
![[CSP2020-J4] 直播获奖](https://img-blog.csdnimg.cn/img_convert/5c8cf286e7bf2c08f859b337286669e9.png)
