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>
相关推荐
前端Hardy11 小时前
12个被低估的 CSS 特性,让前端开发效率翻倍!
前端·javascript·css
前端Hardy11 小时前
HTML&CSS:精美的3D折叠卡片悬停效果
前端·javascript·css
光影少年13 小时前
css优化都有哪些优化方案
前端·css·rust
用户4582031531714 小时前
CSS无需JavaScript的交互效果实现
前端·css
咔咔一顿操作15 小时前
【CSS 3D 交互】打造沉浸式 3D 照片墙:结合 JS 实现拖拽交互
前端·javascript·css·3d·交互·css3
用户4582031531715 小时前
Flexbox布局上手:10分钟告别垂直居中难题
前端·css
霸气小男15 小时前
解决React中通过外部引入的css/scss/less文件更改antDesign中Modal组件内部的样式不生效问题
css·react.js
rannn_1111 天前
【Javaweb学习|实训总结|Week1】html基础,CSS(选择器、常用样式、盒子模型、弹性盒布局、CSS定位、动画),js(基本类型、运算符典例)
css·笔记·学习·html
β添砖java1 天前
CSS3核心技术
前端·css·css3
猫头虎-前端技术1 天前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体