如何设置高度以避免大屏幕中的空白

Question

我正在尝试设计以下布局：

如何设置每个图块的高度，以便在大屏幕显示器中正确缩放。我尝试以 px 为单位设置最小高度，以 % 为单位设置高度。但在大型显示器中，底部似乎有空白。

如何确保大屏幕底部没有空白区域，同时完美适配普通笔记本电脑显示器 (mdpi) 并在移动设备中堆叠一个下方（即响应式）。我应该使用什么单位。

Answer 1

所以flexboxes 可以做到这一点 - 你可以看到它显然是响应式的。

我在这里创建了一个高视口flexbox。您可以调整wrapper 的height 以获得您想要的。请参阅this answer too 了解另一个正在执行相同操作的示例。

为了显示动态内容在此布局中的行为方式，在此处添加了一些带有此 css 的文本内容：

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

检查一下，让我知道您对此的反馈。谢谢！

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 可以让你很容易地做到这一点。 以下是一些可以帮助您入门的链接： https://envato.com/blog/css3-flexbox/
Understanding CSS3 Flexbox

此外，还有许多其他有关此主题的网页。谷歌是你的朋友