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;
}
相关推荐
汪子熙2 分钟前
走进 Fundamental NGX Platform:从 SAP 设计体系到高生产力组件层
前端·javascript·面试
拉不动的猪15 分钟前
单点登录全流程小姐
前端·javascript·面试
菜鸟小九23 分钟前
html、css(javaweb第一天)
前端·css·html
y东施效颦42 分钟前
uni-app页面发布测试环境出现连接服务器超时,点击屏幕重试解决方案
前端·javascript·vue.js·uni-app·vue
秋田君1 小时前
深入理解JavaScript设计模式之单例模式
javascript·单例模式·设计模式
摸鱼仙人~1 小时前
React中子传父组件通信操作指南
前端·javascript·react.js
程序员阿超的博客1 小时前
React事件处理:如何给按钮绑定onClick点击事件?
前端·javascript·react.js
前端小咸鱼一条2 小时前
Vue中渲染函数的使用
javascript·vue.js·ecmascript
郑州小张2 小时前
前端解析PDF文件目录以及点击目录实现对应内容预览
前端·javascript
这是个栗子2 小时前
HTML(一)
javascript·ajax·css3·html5