Question

我有以下标记：

<div class="container">
    <div class="strip">
    </div>
    <div class="content">
    </div>
    <div class="footer">
    </div>
</div>

并且我试图弄清楚我需要添加什么CSS，以使内容区域填满带状区或页脚未占用的垂直空间。

请注意，该容器是position: fixed，其中包含top: 0和bottom: 0，因此该容器占据了浏览器窗口高度的100％。此外，条带具有设置的高度，但页脚没有设置（也不能这样做，因为内容有些动态）。但是，我希望页脚占用最少的空间，并让内容区域填充页面上其余的垂直空间。

我认为我需要使用flexbox来做到这一点，但我不确定。

这是到目前为止我拥有的CSS：

.container {
    bottom: 0;
    left: 0;
    position: fixed;
    top: 0;
}

.strip {
    background: red;
    height: 5px;
}

.content {
}

.footer {
}

Answer 1

我希望这是您想要的：)如果没有设置width或right，则容器的宽度基本上为0。 .strip位于容器的开头，.footer位于容器的结尾。如果没有.content属性，则flex-grow可以拉伸，但不会比其邻居拉伸更多。.container { bottom: 0; left: 0; position: fixed; top: 0; right: 0; display: flex; flex-direction: column; } .strip { justify-self: flex-start; background: red; height: 5px; } .content { justify-self: stretch; background: blue; flex-grow: 1; } .footer { justify-self: flex-end; background: yellow }属性确定当正数自由时，flex项相对于flex容器中其余的flex项会增长多少空间是分布的。

<div class="container">
  <div class="strip">
  </div>
  <div class="content">
    test
  </div>
  <div class="footer">
    footer
  </div>
</div>

request.open("get","MY_WEBSITE_HERE.COM/"+value, false)

Answer 2

您可以在不使用flexbox的情况下执行此操作...

代码如下：

.container {
  bottom: 0;
  left: 0;
  position: fixed;
  top: 0;
  background-color: red;
  height: 100vh;
  width: 100vw;
}

.strip {
  height: 20%;
  background-color: green;
}

.content {
  height: auto;
  background-color: blue;
}

.footer {
  height: 20%;
  width: 100%;
  background-color: black;
  position: absolute;
}

<div class="container">
  <div class="strip">
  </div>
  <div class="content">
  </div>
  <div class="footer">
  </div>
</div>

带区和页脚的高度固定（可以更改此高度）。将内容添加到div后，内容将增加高度。内容div将填充条带和页脚之间的空间。

如何获得此布局（使用CSS flexbox）？

2 个答案: