如何让孩子在固定视野下100%适合父母身高?

Question

我有一个固定高度为 20 厘米的div。现在，内页需要有填充，位置绝对需要尊重该填充。

如何使红色框始终填充剩余的内容？无论如何，位置绝对项都需要始终位于底部。

它需要有一个班级，而不是 10 个具有 10 个不同高度的班级，如 58%、45% 等......

如果您检查代码笔：https://codepen.io/Aurelian/pen/MqxvgW

这是 HTML：

<div class="page">
<div class="image"></div>
<div class="page-inner-default">
<p>hello</p>
<span class="pos-bot">Hi</span>
</div>
</div>
<div class="page">
<div class="image"></div>
<h1>Heading</h1>
<div class="page-inner-default">
<p>hello</p>
<span class="pos-bot">Hi</span>
</div>
</div>

这是 CSS：

*, *:before, *:after {
box-sizing: border-box;
}
body {
background: grey;
box-sizing: border-box;
}
.image {
height: 250px;
border: 1px solid green;
background: green;;
}
.pos-bot {
position: absolute;
bottom: 0;
}
.page {
height: 20cm;
background-color: white;
width: 16cm;
margin: 50px auto;
display: inline-block;
vertical-align: top;
position: relative;
}
.page-inner-default {
position: relative;
padding: 50px;
height: 100%;
border: 1px solid red;
}
.image {
}

Answer 1

给出 .page{overflow：hidden} 并从 .page-inner-default 中删除位置相对，以便 .pos-bot 将定位到最近的相对位置，在本例中它是 .pagediv

*, *:before, *:after {
box-sizing: border-box;
}
body {
background: grey;
box-sizing: border-box;
}
.image {
height: 250px;
border: 1px solid green;
background: green;;
}
.pos-bot {
position: absolute;
bottom: 0;
}
.page {
overflow: hidden;
height: 20cm;
background-color: white;
width: 16cm;
margin: 50px auto;
display: inline-block;
vertical-align: top;
position: relative;
}
.page-inner-default {
padding: 50px;
min-height: 100%;
border: 1px solid red;
}

<div class="page">
<div class="image"></div>
<div class="page-inner-default">
<p>hello</p>
<span class="pos-bot">Hi</span>
</div>
</div>
<div class="page">
<div class="image"></div>
<h1>Heading</h1>
<div class="page-inner-default">
<p>hello</p>
<span class="pos-bot">Hi</span>
</div>
</div>