内容移动的行内块div与高度为100vh

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

检查这并不能发现任何异常，我可以找到 - 无边距，位置变化或任何东西。

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

来源

2016-12-17 Miha Šušteršič

使用最小高度的高度，而不是更换 –

显示内联块浮动：左[https://jsfiddle.net/cfws85qb/] –

只需添加vertical-align: top的CSS规则来进行inline-block的元素，即.thin和.wide。

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

设置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>

来源

2016-12-17 11:20:12

内容移动的行内块div与高度为100vh

回答

相关问题