使min-height子元素height百分比生效的2种方式
2024-10-20 11:55:39
方式1,使用flex
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
padding: 0;
margin: 0;
/* height: 2400px; */
height: 100%;
background: lightgray;
}
.body {
display: flex;
background: yellow;
box-sizing: border-box;
min-height: 600px;
padding: 10px;
}
.child {
flex-basis: 100px;
}
.childchild {
height: 100%;
background: red;
}
</style>
</head>
<body> <div class="body">
<div class="child">
<div class="childchild"></div>
</div>
</div>
</body>
</html>
这种方式若childchild高度超过child,会撑开child元素,若想childchild的高度不撑开child,用下面的方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
padding: 0;
margin: 0;
/* height: 2400px; */
height: 100%;
background: lightgray;
}
.body {
display: flex;
background: yellow;
box-sizing: border-box;
min-height: 600px;
padding: 10px;
flex-direction: column;
}
.child {
flex-basis: 100px;
flex-grow: 1;
height: 0;
}
.childchild {
height: 800px;
background: red;
}
</style>
</head>
<body> <div class="body">
<div class="child">
<div class="childchild"></div>
</div>
</div>
</body>
</html>
方式2,使用grid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html, body {
padding: 0;
margin: 0;
/* height: 2400px; */
height: 100%;
background: lightgray;
}
.body {
display: grid;
min-height: 600px;
background: yellow;
padding: 10px;
}
.child {
height: 100%;
background: red;
} </style>
</head>
<body>
<div class="body">
<div class="child">
</div>
</div>
</body>
</html>
这种方式child也会撑开body
最新文章
- 《DSP using MATLAB》示例Example5.10
- Hibernate的性能优化问题
- c#实现房贷计算的方法源码
- windows下使用vim+ctags+taglist
- Unity3d 在不同设备中的文件读写 的路径
- 大规模web服务开发技术
- cron任务解释
- CSS速查列表-3-(font)字体
- [PHP] 频率限制类
- Win10家庭版-添加[组策略]
- Mark标记功能的实现(像手工标记的一样)
- 数论算法 剩余系相关 学习笔记 (基础回顾,(ex)CRT,(ex)lucas,(ex)BSGS,原根与指标入门,高次剩余,Miller_Rabin+Pollard_Rho)
- git服务器搭建全程
- CentOS 7下KVM支持虚拟化/嵌套虚拟化配置
- POJ 1964&HDU 1505&HOJ 1644 City Game(最大0,1子矩阵和总结)
- some issues that you should be take care of when use the plupload module
- Android之怎样强制横竖屏显示
- Gym - 101194F(后缀数组)
- java环境安装(win7)
- wireshark_1.6.2 使用笔记
热门文章
- python appium server代码启动和关闭遇到的坑
- .NET性能优化-为结构体数组使用StructLinq
- Android 12(S) 图像显示系统 - SurfaceFlinger GPU合成/CLIENT合成方式 - 随笔1
- Java泛型类型擦除问题
- 867. Transpose Matrix - LeetCode
- linux篇-linux iptables配置
- 好客租房28-state和this.setState(this.setState修改状态)
- 106_Power Pivot之HR入离调转、在职、离职率相关指标
- bind-utils-测试域名解析
- 翻页组件page-flip调用问题