wie Höhe einzustellen weißen Raum in großen Bildschirmen zu vermeiden

Question

Ich versuche, das folgende Layout zu entwerfen:

Wie kann ich die Höhe jeder Platte so eingestellt, dass sie richtig in großem Bildschirm Monitore Waagen . Ich habe versucht, Höhe in Pixel und Höhe in% einzustellen. Aber bei großen Monitoren scheint unten ein weißer Raum zu sein.

Wie stelle ich sicher, dass auf großen Bildschirmen kein weißer Bereich unten ist, während es perfekt in gewöhnliches Laptop-Display (mdpi) passt und im mobilen Bereich auch untereinander gestapelt ist (z. B. reagiert es). Welche Einheiten sollte ich verwenden?

Answer 1

So ist dies mit flexbox es möglich - Sie können sehen, dass es deutlich anspricht.

Ich habe hier ein Viewport-High flexbox erstellt. Sie können die height von wrapper anpassen, um es wie gewünscht zu erhalten. Ein weiteres Beispiel finden Sie unter this answer too, wo das Gleiche gemacht wird.

.content{ 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    overflow-y: auto; 
} 

Check this out und lassen Sie mir Ihr Feedback zu diesem Thema wissen:

Für das zeigt, wie dynamische Inhalte in diesem Layout verhält, haben einige Textinhalt hier mit diesem CSS hinzugefügt. Vielen Dank!

body { 
 
    margin: 0; 
 
} 
 
* { 
 
    box-sizing: border-box; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    height: 100vh; 
 
} 
 
.wrapper > div:last-child { 
 
    width: 50%; 
 
    border: 1px solid; 
 
} 
 
.wrapper > div:first-child { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 50%; 
 
    height: 100%; 
 
} 
 
.wrapper > div:first-child > div:last-child { 
 
    width: 100%; 
 
    height: 50%; 
 
    border: 1px solid; 
 
} 
 
.wrapper > div:first-child > div:first-child { 
 
    height: 50%; 
 
    display: flex; 
 
} 
 
.wrapper > div:first-child > div:first-child > div { 
 
    width: 50%; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.wrapper > div:first-child > div:first-child > div:last-child { 
 
    border: 1px solid; 
 
} 
 
.wrapper > div:first-child > div:first-child > div:first-child > div { 
 
    height: 50%; 
 
    border: 1px solid; 
 
} 
 
.content { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    overflow-y: auto; 
 
} 
 
@media only screen and (max-width: 650px) { 
 
    .wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    height: auto; 
 
    } 
 
    .wrapper > div:first-child, 
 
    .wrapper > div:last-child { 
 
    width: 100%; 
 
    } 
 
    .wrapper > div:first-child > div:first-child { 
 
    width: 100%; 
 
    flex-direction: column; 
 
    } 
 
    .wrapper > div:first-child > div:first-child > div { 
 
    width: 100%; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div> 
 
    <div> 
 
     <div> 
 
     <div class="content"> 
 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, 
 
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. 
 
     </div> 
 
     <div class="content"> 
 
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, 
 
      sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. 
 
     </div> 
 
     </div> 
 
     <div class="content"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, 
 
     sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. 
 
     </div> 
 
    </div> 
 
    <div class="content"> 
 
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, 
 
     sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. 
 
    </div> 
 
    </div> 
 
    <div class="content"> 
 
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, 
 
    sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. 
 
    </div> 
 
</div>

Answer 2

Mit CSS3 flexbox können Sie dies ganz einfach tun. ist hier ein paar Links, die Ihnen den Einstieg erhalten: https://envato.com/blog/css3-flexbox/
Understanding CSS3 Flexbox

Plus gibt es viele andere Web-Seiten zu diesem Thema. Google ist dein Freund