html - 使 div 位于屏幕底部而不是父级底部

Question

我有一个特殊的 html 结构，可以模拟带有页面的应用程序结构。

请访问JsFiddle首先要了解问题。

.screen-emulator {
  width: 300px;
  height: 400px;
  background-color: red;
}

.head {
  width: 100%;
  height: 70px;
  background-color: blue;
}

.body {
  width: 100%;
  height: 100%;
  overflow-y: auto;
}

.page {
  position: relative;
  width: 100%;
  height: 500px;
  background-color: black;
}

.page-test {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: violet;
}

<div class="screen-emulator">
  <div class="head">Head</div>
  <div class="body">
    <div class="page">
      <div class="page-test">page-test</div>
    </div>
  </div>
</div>

所以我的问题是:css 中有没有办法让 .page-test 一直运行到屏幕结束，而不是直到他的父级 (.page ) 结束 ?

这里的问题是 .page-test 中的 height: 100%; 属性会一直持续到 .page 底部。我更愿意指定我将无法更改 HTML 结构(即使它解决了问题)并且我事先不知道 .head 的高度。

Answer 1

如果我理解正确的话，我认为 flexbox 就是答案。

首先将所有元素的边距和填充显式设置为零(有时称为引导)，这会覆盖浏览器应用的任何默认用户代理样式。

将 .screen-emulator 高度设置为 100vh 并使其成为 flexbox 容器。您不想更改 .head 的未知高度，因此我们设置了 flex: none;。 .body 是唯一使用 flex: 1; 占用剩余可用高度的 flex 元素。 https://css-tricks.com/boxes-fill-height-dont-squish/

body,
.screen-emulator,
.head,
.body,
.page,
.page-test {
  margin: 0;
  padding: 0;
}

.screen-emulator {
  width: 300px;
  height: 100vh;
  background-color: red;
  display: flex;
  flex-direction: column;
}

.head {
  width: 100%;
  background-color: blue;
  flex: none;
}

.body {
  width: 100%;
  flex: 1;
  overflow-y: auto;
}

.page {
  position: relative;
  width: 100%;
  min-height: 100%;
  background-color: black;
}

.page-test {
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-color: violet;
}

<div class="screen-emulator">

  <div class="head">
    <h1>Head</h1>
    <p>Random content</p>
  </div>
  <div class="body">
    <div class="page">

      <div class="page-test">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Senectus et netus et malesuada fames ac turpis egestas. Massa tincidunt dui ut ornare lectus sit amet. Posuere ac ut consequat
          semper viverra nam libero justo laoreet. Sit amet commodo nulla facilisi nullam vehicula ipsum a arcu. Phasellus vestibulum lorem sed risus. Congue eu consequat ac felis donec et odio pellentesque diam. Consectetur lorem donec massa sapien faucibus

        </p>
        <p>
          Nisl suscipit adipiscing bibendum est ultricies integer quis. Pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Netus et malesuada fames ac turpis egestas. Ultricies mi quis hendrerit dolor magna eget. Tellus mauris
          a diam maecenas sed enim. Turpis massa tincidunt dui ut ornare lectus sit. Dolor magna eget est lorem ipsum. Sit amet consectetur adipiscing elit ut. Id donec ultrices tincidunt arcu non sodales. Interdum consectetur libero id faucibus nisl

        </p>

      </div>

    </div>
  </div>


</div>