如何通过固定视图使孩子适合 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 将定位到最近的相对位置，在这种情况下它是 .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>