html - 内容移动高度为 100vh 的行内 block div

Question

我有一个高度为 100vh、宽度为百分比的 div。当我向这个 div 添加内容时(在示例中是一些 lorem ipsum)，div 向下移动。当 div 没有内容时，它会停留在屏幕顶部。

检查这并没有发现我能发现的任何异常 - 没有 margin 、头寸变化或任何东西。

如何让包含内容的 div 保持在页面顶部？

body {
  font-size: 0;
}

.thin,
.wide {
  height: 100vh;
  display: inline-block;
  font-size: 0;
}

.wide {
  width: 61.80%;
  background-color: red;
}

.thin {
  width: 38.20%;
  background-color: green;
}

.wide p {
  margin: 0;
  padding: 0;
  font-size: 15px;
}

<div>
  <div class="thin">
    <div class="wide">
    </div>
    <div class="thin"></div>
  </div>
  <div class="wide">
    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam beatae corporis doloribus ea magnam minus molestiae veritatis. Beatae consectetur dicta doloribus eaque explicabo iure possimus quisquam sequi veritatis voluptas!</span><span>Accusamus dolor eius magnam officia qui. Ab at commodi consectetur distinctio ducimus earum et explicabo fuga illo ipsa iure laudantium natus nesciunt nisi ratione rerum sit tempore unde velit, vero.</span><span>Ab debitis earum error explicabo facilis fugit itaque, nobis officia optio pariatur perferendis quas quasi quibusdam quidem rerum similique voluptatem! Aliquam distinctio eos molestias natus nostrum ut voluptatem? Illo, quam!</span><span>Dolorem esse est impedit iusto maxime, neque officia voluptatum? Assumenda eos et facilis fugit incidunt inventore magni, maiores, minima modi mollitia nihil officiis quibusdam quisquam rem veniam vitae voluptatibus. Aut!</span>
    </p>
  </div>
</div>

Answer 1

只需将 vertical-align: top 添加到内联 block 元素的 CSS 规则中，即 .thin 和 .wide。

默认情况下，vertical-align 设置为 baseline。对于带有文本的内联元素，基线对应于文本 block 的最底部行，而对于空元素，基线位于文本开始的顶部。这导致空元素的顶部与填充元素中文本的底部对齐。

设置 vertical-align: top 解决了这个问题。

body {
  font-size: 0;
}

.thin,
.wide {
  height: 100vh;
  display: inline-block;
  font-size: 0;
  vertical-align: top;
}

.wide {
  width: 61.80%;
  background-color: red;
}

.thin {
  width: 38.20%;
  background-color: green;
}

.wide p {
  margin: 0;
  padding: 0;
  font-size: 15px;
}

<div>
  <div class="thin">
    <div class="wide">
    </div>
    <div class="thin"></div>
  </div>
  <div class="wide">
    <p><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquam beatae corporis doloribus ea magnam minus molestiae veritatis. Beatae consectetur dicta doloribus eaque explicabo iure possimus quisquam sequi veritatis voluptas!</span><span>Accusamus dolor eius magnam officia qui. Ab at commodi consectetur distinctio ducimus earum et explicabo fuga illo ipsa iure laudantium natus nesciunt nisi ratione rerum sit tempore unde velit, vero.</span>
    </p>
  </div>
</div>