如何在全屏幕上拉伸flexbox？

Question

如何让我的flexbox在全屏上拉伸？ 这是我的网站，我想从中删除免费空间＆gt;＆gt;

请帮帮我并告诉我如何让我的网站全屏？ 我试图使保证金和填充为零但不起作用：/

这是我的网站，请帮助我，这非常重要。 ！重要的:) lumin.ge/html/wwwabc

Answer 1

编辑 -

你想要伸展的div甚至还没有伸展，这是一个可能的解决方案。 注意您必须使用较小尺寸的游戏，但它应该很容易。

将以下内容添加到CSS中。

.site-info {
  background: #F57828;
  text-align: center;
  height: 25vh;
}
#section2 .header {
  background: #000;
  height: 50vh;
}

请发布一些代码以帮助我们。 This post应该可以帮助您入门。

来自帖子的示例代码 -

＆＃13;

＆＃13;

.fill-height-or-more {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.fill-height-or-more > div {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.some-area > div {
  padding: 1rem;
}
.some-area > div:nth-child(1) {
  background: #88cc66;
}
.some-area > div:nth-child(2) {
  background: #79b5d2;
}
.some-area > div:nth-child(3) {
  background: #8cbfd9;
}
.some-area > div:nth-child(4) {
  background: #9fcadf;
}
.some-area > div:nth-child(5) {
  background: #b3d4e6;
}
.some-area > div h1, .some-area > div h2 {
  margin: 0 0 0.2rem 0;
}
.some-area > div p {
  margin: 0;
}

html, body {
  height: 100%;
}

＆＃13;

<section class="some-area fill-height-or-more">
  <div>
      <h1>Boxes That Fill Height (or more)</h1>
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
  </div>
  <div>
      <h2>Two</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
  </div>
  <div>
      <h2>Three</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
  </div>
  <div>
      <h2>Four</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
  </div>
  <div>
      <h2>Five</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error ut.</p>
  </div>
</section>

＆＃13;

＆＃13;

＆＃13;