how to set height to avoid white space in large screens

Question

I am trying to design the following layout:

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.

Answer 1

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>

Answer 2

CSS3 flexbox will allow you to do this, quite easily. Here is a few links that will get you started: https://envato.com/blog/css3-flexbox/
Understanding CSS3 Flexbox

Plus there are MANY other web pages on this subject. Google is your friend