极客观点
项目管理
HarmonyOS
请问下我想让div高度撑满屏幕该如何处理呢？
现在我是给每一级都加了height 100%
父级div设置了100%倒是刚好撑满一屏
然后我想子div高度也自动填满，这时候就导致父div超长导致有滚动条啦，该咋整呢麻烦各位大大支个招谢啦
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
body,
html {
height: 100%;
}
.content {
height: 100%;
display: flex;
}
.div1 {
background-color: aqua;
width: 400px;
height: 100%;
display: inline-block;
}
.l-t {
height: 140px;
background-color: brown;
}
.l-b {
clear: both;
overflow: hidden;
height: 100%;
float: left;
}
.left {
width: 60px;
float: left;
background-color: darkcyan;
height: 100%;
}
.right {
width: 340px;
float: left;
background-color: chartreuse;
height: 100%;
}
.div2 {
background-color: blanchedalmond;
display: inline-block;
flex: 1;
}
.div3 {
background-color: blueviolet;
width: 400px;
height: 100%;
display: inline-block;
}
</style>
<body>
<div class="content">
<div class="div1">
<div class="l-t">
</div>
<div class="l-b">
<div class="left">
</div>
<div class="right">
</div>
</div>
</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
</body>
</html>
你在div1这个类里面加overflow: hidden;就好，少用浮动。。脱离文档流很容易发生意料之外的事情。。浮动能做得，弹性布局display:flex也和容易能做到。。
----------补充----------
你错误的原因，主谋不是左右两个盒子，是l-b这个盒子，
你没给它设计宽度并他给设计了浮动，所以没添加两个子盒子的时候，它的宽度为0不显示在页面，然后加了两个子盒子后，他的宽度撑开，高度继承了父元素的100%,所以他撑开页面，出现了进度条。左右两个盒子只能算是从犯了。