如何设置高度以避免大屏幕中的空白 [英] how to set height to avoid white space in large screens

问题描述

我想设计以下布局：

如何设置每个拼贴的高度，以便在大屏幕显示器中正确缩放。我试图设置最小高度在px和高度在％。但在大型显示器，似乎有白色的空间在底部。

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.

如何确保在大屏幕底部没有白色空间，同时完美适合普通笔记本电脑显示器（mdpi），并且在移动设备它是响应）。

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.

推荐答案

所以这可以用 flexbox

我已经在这里创建了一个视口高的 flexbox 。您可以调整 wrapper 的 height 来获取它。有关另一个示例，请参见此答案同样的事情正在做。

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.

为了显示动态内容在这个布局中的行为，在这里添加了一些文本内容与这个css：

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>

这篇关于如何设置高度以避免大屏幕中的空白的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！