CSS:上面固定高度、下面填充满,上面消失,下面仍然填充满

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  html, body {
  height: 100%;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%; /* 使用最小高度来确保占据整个屏幕 */
}

.top {
  height: 100px;
  background-color: lightgray;
}

.bottom {
  flex-grow: 1;
  background-color: lightblue;
}
</style>
<body>
  <div class="container">
    <div class="top">上</div>
    <div class="bottom">下</div>
  </div>
</body>
</html>
相关推荐
深蓝电商API13 小时前
网页结构解析入门:HTML、CSS、JS 与爬虫的关系
javascript·css·html
Python私教16 小时前
React 19 如何优雅整合 Ant Design v5 与 Tailwind CSS v4
前端·css·react.js
汤姆Tom16 小时前
写这么多年CSS,都不知道什么是容器查询?
前端·css·面试
曦曜29216 小时前
聊聊前端静态页面的开发
css·html
向葭奔赴♡1 天前
CSS是什么?—— 网页的“化妆师”
前端·css
银安1 天前
CSS排版布局篇(4):浮动(float)、定位(position) 、层叠(Stacking)
前端·css
wsWmsw2 天前
[译] 浏览器里的 Liquid Glass:利用 CSS 和 SVG 实现折射
前端·css·svg
银安2 天前
CSS排版布局篇(2):文档流(Normal Flow)
前端·css
折翼的恶魔2 天前
前端学习之样式设计
前端·css·学习
街尾杂货店&2 天前
css word-spacing属性
前端·css