內容移動的行內塊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

回答

相關問題