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

上下布局:

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;
}
相关推荐
程序研9 分钟前
一、ES6-let声明变量【解刨分析最详细】
前端·javascript·es6
疯狂的沙粒30 分钟前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
xiaominlaopodaren1 小时前
Three.js 光影魔法:如何单独点亮你的3D模型
javascript
PasserbyX1 小时前
一句话解释JS链式调用
前端·javascript
1024小神1 小时前
tauri项目,如何在rust端读取电脑环境变量
前端·javascript
古夕1 小时前
如何将异步操作封装为Promise
前端·javascript
@一枝梅1 小时前
vue3 vite.config.js 引入bem.scss文件报错
javascript·rust·vue·scss
古夕1 小时前
JS 模块化
前端·javascript
一只小风华~1 小时前
HTML前端开发:JavaScript 常用事件详解
前端·javascript·html
要加油哦~2 小时前
css | class中 ‘.‘ 和 ‘:‘ 的使用 | 如,何时用 &.is-selected{ ... } 何时用 &:hover{...}?
前端·css