移动内联块div的内容，高度为100vh

Question

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

检查这一点并没有发现我能找到的任何不寻常的东西 - 没有边距，位置变化或任何东西。

如何让包含内容的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

只需将action="clickMe" 添加到内联块元素的CSS规则中，即vertical-align: top和.thin。

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

设置baseline可以解决问题。

＆＃13;

＆＃13;

vertical-align: top

＆＃13;

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;
}

＆＃13;

＆＃13;

＆＃13;