如何以固定的视角使孩子适合父母身高的100％？

Question

我有一个固定高度为20cm的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将定位到最接近的相对位置，在这种情况下，它就是.page div

*, *: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>