Inhalt bewegt Inline-Block div mit einer Höhe von 100vh

Question

Ich habe ein div mit einer Höhe von 100vh, und eine Breite in Prozent. Wenn ich Inhalt zu diesem div hinzufüge (im Beispiel etwas lorem ipsum), bewegt sich div nach unten. Wenn der div-Inhalt leer ist, bleibt er oben auf dem Bildschirm.

Die Überprüfung zeigt nichts ungewöhnliches, das ich finden kann - keine Ränder, Positionsänderungen oder irgendetwas.

Wie bekomme ich das div mit Inhalt, um oben auf der Seite zu bleiben?

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

Nur vertical-align: top an die CSS-Regel für die Inline-Block-Elemente hinzufügen, nämlich .thin und .wide.

Standardmäßig ist vertical-align auf baseline eingestellt. Bei einem Inline-Element mit Text entspricht die Grundlinie der untersten Zeile des Textblocks, während sich bei einem leeren Element die Grundlinie oben befindet, wo der Text beginnen würde. Dies führt dazu, dass die leeren Elemente am oberen Rand des Textes im gefüllten Element ausgerichtet sind.

Einstellung vertical-align: top löst das Problem.

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>