css实现头部占一定高度，内容区占剩余高度可滚动

史学娇2023-12-09 19:42

上下布局：

html 复制代码

<div class="container">
  <header class="header">头部内容</header>
  <div class="content">内容区域</div>
</div>

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 可视窗口高度，可根据需求进行调整 */
}

.header {
  height: 100px; /* 头部高度，可根据需求进行调整 */
  background-color: #ccc;
}

.content {
  flex-grow: 1; /* 填充剩余空间 */
  background-color: #f0f0f0;
  overflow-y: auto;
}

左右布局：

左侧定宽，右侧占据剩余剩余宽度。实现原理同上下布局。

html 复制代码

<div class="container">
  <div class="left">左侧内容</div>
  <div class="right">右侧内容</div>
</div>

container {
  display: flex;
}

.left {
  width: 200px; /* 左侧宽度 */
  background-color: #ccc;
}

.right {
  flex-grow: 1; /* 填充剩余空间 */
  background-color: #f0f0f0;
}