CSS中DIV高度的设置？

CSS中DIV高度的设置？

html,
body { height: 100%; padding: 0; margin: 0; }
.mother { height: 100%; padding: 100px 0 0; box-sizing: border-box ; }
.A { height: 100px; margin: -100px 0 0; background: #BBE8F2; }
.B { height: 100%; background: #D9C666; }

<div class="mother">
<div class="A">头部DIV</div>
<div class="B">下部DIV</div>
</div>

代码效果
你可以看下效果，望采纳。
2021-09-06

html代码：
<div class="container">
<div class="up"></div>
<div class="down"></div>
</div>
css代码：
<style>
.container{
background-color: lightblue;
width: 500px;
height: 700px;

}
.up{
width: 100%;
height: 200px;
background-color: lightcoral;
}
.down{
width: 200px;
height: auto;
}
</style>

下面的div高度设为auto就行，会自动占满整个父容器剩余的高度2021-12-01

<style>
*{
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
.mother {
height: 100%;
width: 100%;
}

.A {
height: 100px;
background: #BBE8F2;
}

.B {
height: calc(100% - 100px);
background: #D9C666;
}
</style>

<div class="mother">
<div class="A">头部DIV</div>
<div class="B">下部DIV</div>
</div>
或者使用 grid 布局:
<style>
*{
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
.mother {
height: 100%;
width: 100%;
display: grid;
grid-template-rows: 100px 1fr;
}

.A {
background: #BBE8F2;
}

.B {
background: #D9C666;
}
</style>2021-09-16