html - 固定 View 如何让 child 100%适应 parent 高度？

Question

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

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

它需要有一个类，而不是具有 10 个不同高度(例如 58%、45% 等)的 10 个类...

如果你检查代码笔: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>