user93 user93 - 2 months ago 10
CSS Question

how to set height to avoid white space in large screens

I am trying to design the following layout:

enter image description here

How do I set the height of each tile so that it scales in large screen monitors properly. I tried setting min height in px and height in %. But In large monitors there seems to be white space at bottom.

How do I make sure there is no white space at bottom in large screens while fitting perfectly in ordinary laptop display (mdpi) and also stacks one below another in mobile (I.e it is responsive). What units should I use. Thanks in advance.

Answer

So this is possible with flexboxes- you can see that it is clearly responsive.

I have created a viewport-high flexbox here. You can adjust the height of wrapper to get it as you have desired. See this answer too for another example where the same thing is being done.

For showing how dynamic content behaves in this layout, have added some text content here with this css:

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

Check this out and let me know your feedback on this. Thanks!

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>