html - 使用 CSS 有两个(或更多)显示为 : table-cell fill the entire screen, 的 div，无论其中的内容如何

Question

我想要 2 个 div，彼此堆叠，使用 display: table-cell;。

我还希望每个 div 的高度和宽度都占屏幕的 100%。

我已经尝试过这样做，但我无法完全做到，这是我的代码。

body,
html {
  height: 100%;
}
body {
  margin: 0;
}
.height {
  min-height: 100%;
}
.width {
  width: 100%;
}
.wrapper {
  position: relative;
  height: 100%;
  display: table;
  margin: 0 auto;
}
.in-wrap {
  display: table-row;
}
.align {
  position: relative;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.black {
  background-color: black;
  color: white;
}

<div class="width wrapper">
  <div class="in-wrap">
    <div class="align black">
      <h3>Lorem ipsum dolor sit amet,</h3>
      <p>
        <button>consectetur adipiscing elit</button>
      </p>
    </div>
  </div>
  <div class="in-wrap">
    <div class="align">
      <h3>Donec auctor ornare augue vel lobortis.</h3>
      <p>Nulla pellentesque urna vitae felis congue aliquet.</p>
      <button id="projects">Nullam vitae pharetra nisl.</button>
    </div>
  </div>
</div>

Answer 1

给 .in-wrap 100vh 的高度并去掉所有的 height: 100%

.in-wrap {
  height: 100vh;
  display: table-row;
}

例子....

body {
  margin: 0;
}

.width {
  width: 100%;
}
.wrapper {
  position: relative;
  display: table;
  margin: 0 auto;
}
.in-wrap {
  height: 100vh;
  display: table-row;
}
.align {
  position: relative;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
}
.black {
  background-color: black;
  color: white;
}

<div class="width wrapper">
  <div class="in-wrap">
    <div class="align black">
      <h3>Lorem ipsum dolor sit amet,</h3>
      <p>
        <button>consectetur adipiscing elit</button>
      </p>
    </div>
  </div>
  <div class="in-wrap">
    <div class="align crisscross">
      <h3>Donec auctor ornare augue vel lobortis.</h3>
      <p>Nulla pellentesque urna vitae felis congue aliquet.</p>
      <button id="projects">Nullam vitae pharetra nisl.</button>
    </div>
  </div>
</div>