极客观点
项目管理
HarmonyOS
比如.right-b 这块
想要的效果就是ul高度超出就出滚动条，chrome下是对的
但是ff下就造成整个页面出了滚动条改怎么破呢·麻烦各位大大支支招，谢啦
<!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: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.div1 {
background-color: aqua;
width: 400px;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.l-t {
height: 140px;
background-color: brown;
}
.l-b {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.left {
width: 60px;
background-color: darkcyan;
}
.right {
width: 340px;
background-color: chartreuse;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.right-t {
height: 100px;
background: forestgreen;
}
.right-b {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
background: darkgoldenrod;
overflow-y: scroll;
}
.div2 {
background-color: blanchedalmond;
display: inline-block;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
}
.div3 {
background-color: blueviolet;
width: 400px;
height: 100%;
display: inline-block;
}
ul li {
line-height: 400px;
}
</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 class="right-t"></div>
<div class="right-b">
<ul>
<li>啦啦啦</li>
<li>一柱擎天</li>
</ul>
</div>
</div>
</div>
</div>
<div class="div2">2</div>
<div class="div3">3</div>
</div>
</body>
</html>
给.l-b 的元素加overflow: hidden;