Description of Requirement:
In the small program, the height of the outermost page is 100%, and the height of the first box inside is max-height: 60%; there are title and content in the first box, and the content height should follow the height of the first box Go, the highest is the height of the first-level box minus the height of the title. If the height exceeds the height of the first-level box, scrolling is required.
I wrote an html to simulate the height failure scenario: the height inherited from max-height is invalid
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
line-height: 1;
font-size: 14px;
}
.out{
width: 380px;
height: 580px;
background: greenyellow;
margin: 0 auto;
margin-top: 20px;
}
.box{
max-height: 60%;
background: orangered;
}
.box-top{
height: 32px;
line-height: 32px;
background: purple;
}
.box-list{
height: calc(100% - 32px - 24px);
/* height: 30%; */
overflow: auto;
box-sizing: border-box;
padding: 12px;
background: rgba(0,0,0,0.35);
}
.box-list-item{
margin-bottom: 8px;
background: rgba(233,233,233,0.75);
line-height: 1.4;
border-radius: 6px;
box-sizing: border-box;
padding: 8px;
}
.box-list-item:last-child{
margin-bottom: 0px;
}
.box-btm{
height: 24px;
line-height: 24px;
background: pink;
}
</style>
</head>
<body>
<div class="out">
<div class="box">
<div class="box-top">top</div>
<div class="box-list">
<div class="box-list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quo corporis minus laudantium consectetur unde vero sunt perferendis impedit. Nulla quae atque eaque expedita tempore cupiditate reiciendis odio corrupti tenetur!</div>
<div class="box-list-item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit illo, sint cupiditate quis quae in eius tempore aspernatur nostrum minima vero beatae id, iusto non quos nemo consequuntur veniam officia.</div>
<div class="box-list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. In officia porro, consequuntur incidunt iusto eligendi expedita. In excepturi repellat libero quia sunt impedit vero alias cupiditate, temporibus, quod itaque mollitia?</div>
<div class="box-list-item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit sit quis, cumque numquam illo, delectus dolorum illum asperiores dolorem tenetur, facilis doloremque? Doloremque, ipsa ab. Veniam laudantium minima doloremque molestias!</div>
<div class="box-list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quam pariatur a est ratione, deserunt voluptatum, rem obcaecati, molestias quas velit autem fuga veritatis? Quae quibusdam cumque impedit minima non.</div>
<div class="box-list-item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro cumque aliquid delectus, aut voluptatum maxime perferendis nemo adipisci reprehenderit accusantium nisi doloribus iste, natus iure sit sint officiis debitis amet?</div>
</div>
<div class="box-btm">bottom</div>
</div>
</div>
</body>
</html>
It can be seen that this height is not inherited, and it is useless to set a percentage or calc percentage calculation.
solution
Using flex, you only need to add three lines of code, or even if the layout is simpler, you only need to add one line of code
.box{
max-height: 60%;
background: orangered;
/* 这里 start */
display: flex;
flex-direction: column;
justify-content: space-between;
/* 这里 end*/
}
full code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
padding: 0;
margin: 0;
line-height: 1;
font-size: 14px;
}
.out{
width: 380px;
height: 580px;
background: greenyellow;
margin: 0 auto;
margin-top: 20px;
}
.box{
max-height: 60%;
background: orangered;
/* 这里 start */
display: flex;
flex-direction: column;
justify-content: space-between;
/* 这里 end*/
}
.box-top{
height: 32px;
line-height: 32px;
background: purple;
}
.box-list{
height: calc(100% - 32px - 24px);
/* height: 30%; */
overflow: auto;
box-sizing: border-box;
padding: 12px;
background: rgba(0,0,0,0.35);
}
.box-list-item{
margin-bottom: 8px;
background: rgba(233,233,233,0.75);
line-height: 1.4;
border-radius: 6px;
box-sizing: border-box;
padding: 8px;
}
.box-list-item:last-child{
margin-bottom: 0px;
}
.box-btm{
height: 24px;
line-height: 24px;
background: pink;
}
</style>
</head>
<body>
<div class="out">
<div class="box">
<div class="box-top">top</div>
<div class="box-list">
<div class="box-list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Hic quo corporis minus laudantium consectetur unde vero sunt perferendis impedit. Nulla quae atque eaque expedita tempore cupiditate reiciendis odio corrupti tenetur!</div>
<div class="box-list-item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Suscipit illo, sint cupiditate quis quae in eius tempore aspernatur nostrum minima vero beatae id, iusto non quos nemo consequuntur veniam officia.</div>
<div class="box-list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. In officia porro, consequuntur incidunt iusto eligendi expedita. In excepturi repellat libero quia sunt impedit vero alias cupiditate, temporibus, quod itaque mollitia?</div>
<div class="box-list-item">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fugit sit quis, cumque numquam illo, delectus dolorum illum asperiores dolorem tenetur, facilis doloremque? Doloremque, ipsa ab. Veniam laudantium minima doloremque molestias!</div>
<div class="box-list-item">Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quam pariatur a est ratione, deserunt voluptatum, rem obcaecati, molestias quas velit autem fuga veritatis? Quae quibusdam cumque impedit minima non.</div>
<div class="box-list-item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Porro cumque aliquid delectus, aut voluptatum maxime perferendis nemo adipisci reprehenderit accusantium nisi doloribus iste, natus iure sit sint officiis debitis amet?</div>
</div>
<div class="box-btm">bottom</div>
</div>
</div>
</body>
</html>