如何使单个DIV填充父DIV中的剩余VERTICAL空间 [英] How make a single DIV fill the remaining VERTICAL space in the parent DIV

问题描述

我有一个div填充视口（宽度为100％，高度为100vh）。

I've got a div that fills the viewport (width is 100%, height is 100vh).

div内部是一个横幅图片％，height未设置，所以它调整大小以自动适应宽度）和另一个div。

Inside the div is a banner image (width is 100%, height is not set so it resizes to automatically fit width), and another div.

我想要内部div填充垂直空间的其余部分。宽度容易;我只需将 width 设置为100％即可。但我希望div也可以填充100％的剩余垂直空间。

I want the inner div to fill the rest of the vertical space. Width is easy; I just set width to 100%. But I want the div to also stretch to fill 100% of the remaining vertical space.

从我看过的，看起来像一个flexbox可以做到这一点...但是

From what I've read, it seems like a flexbox could do that… but I haven't been able to get it to work.

推荐答案

缩减的HTML看起来像这样：

The stripped-down HTML would look something like this:

<div id="flex-container">
  <img src="banner.png" />
  <div id="flex-item">Text or whatever</div>
</div>

这是使这项工作的CSS：

Here's CSS that made this work:

.flex-container {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: center;
  align-items: flex-start;
}
.flex-item {
  position: relative;
  width: 100%;
  order: 0;
  flex: 1 1 auto;
  align-self: stretch;
}

FYI，它在测试环境中运行良好，我的工作设计，它仍然没有垂直拉伸。结果是，我的 .flex-item div是 position：absolute 。将其更改为 position：relative 并没有对设计造成任何负面影响，因此问题解决了。

FYI, it worked great in a test environment, but when I applied it to my working design it still didn't stretch vertically. Turns out the thing that was tripping me up was my .flex-item div was position: absolute. Changing it to position: relative didn't adversely affect the design in any way, so problem solved.

这篇关于如何使单个DIV填充父DIV中的剩余VERTICAL空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！