使用 flex 使内部 div 填充剩余高度 [重复]答案

【问题标题】：Make inner div fill remaining height using flex [duplicate]使用 flex 使内部 div 填充剩余高度 [重复]
【发布时间】：2021-12-30 00:26:01
【问题描述】：

我试图让 id 为 listItems 的 div 填充页面上的剩余高度。我对 Web 开发前端还很陌生，尝试了几种不同的方法，但似乎都没有奏效。

带有绿色边框的 div 是我想要填充剩余高度的地方，同时保持表单在其上方。出于某种原因，窗口的整个高度已经有一个滚动条，我在想黑色/红色边框只会到我的屏幕底部，但由于某种原因也超过了它。关于如何尝试解决这些问题的任何想法？

HTML/CSS 标记：

<!DOCTYPE html>
<html>
    <head>
        <style>
            .home-content {
                display: flex;
                border: 1px solid black;
                height:100vh;
                flex-flow: column;
            }

            .container {
                flex: 1;
                border: 1px solid red;
            }

            #listItems {
                border: 1px solid green;
            }
        </style>
    </head>
    <body>
        <div class="home-section">
            <div class="home-content">
                <div class="container">
                    <form>
                        <label for="example">Input</label>
                        <input type="text" name="example">
                    </form>
                    <div id="listItems">

                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

【问题讨论】：

目前只是一个想法，但请尝试将 height: 100vh 添加到该 Div 的 CSS 中。
别忘了在你的CSS中使用* { margin: 0; padding: 0; }。

标签： html css flexbox

【解决方案1】：

我编辑了@Sfili_81 的答案并将这些添加到*

margin: 0;
padding: 0;

这是完整的代码

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.home-content {
  display: flex;
  border: 1px solid black;
  height: 100vh;
  flex-flow: column;
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}

#listItems {
  border: 3px solid green;
  flex: 1 1 100%;
}

<div class="home-section">
  <div class="home-content">
    <div class="container">
      <form>
        <label for="example">Input</label>
        <input type="text" name="example">
      </form>
      <div id="listItems">

      </div>
    </div>
  </div>
</div>

【讨论】：

【解决方案2】：

<!DOCTYPE html>
<html>
    <head>
        <style>
            *{
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }
            .home-content {
                display: flex;
                border: 1px solid black;
                height:100vh;
                flex-flow: column;
            }

            .container {
                flex: 1;
                border: 1px solid red;
                display: flex;
                flex-direction: column;
            }

            #listItems {
                border: 1px solid green;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="home-section">
            <div class="home-content">
                <div class="container">
                    <form>
                        <label for="example">Input</label>
                        <input type="text" name="example">
                    </form>
                    <div id="listItems">

                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

【讨论】：

欢迎来到 Stack Overflow。没有任何解释的代码很少有帮助。 Stack Overflow 是关于学习的，而不是提供 sn-ps 来盲目复制和粘贴。请编辑您的问题并解释它如何回答所提出的具体问题。见How to Answer。

【解决方案3】：

如果您将容器 div 设置为flex 项，您可以使用flex-direction:column 来实现。

* {
  box-sizing: border-box;
}

.home-content {
  display: flex;
  border: 1px solid black;
  height: 100vh;
  flex-flow: column;
}

.container {
  flex: 1;
  display: flex;
  flex-direction: column;
  border: 1px solid red;
}

#listItems {
  border: 3px solid green;
  flex: 1 1 100%;
}

<div class="home-section">
  <div class="home-content">
    <div class="container">
      <form>
        <label for="example">Input</label>
        <input type="text" name="example">
      </form>
      <div id="listItems">

      </div>
    </div>
  </div>
</div>

【讨论】：

似乎确实允许 listItems 容器填充其余部分，我们如何摆脱页面上奇怪的溢出？我刚才也尝试了上面的 cmets，但溢出仍然会以这种方式发生? 我假设它完全适合我的屏幕高度，但有一点额外的高度 - 我确实尝试过设置边距/也填充到 0
尝试使用带有 * { box-sizing: border-box;} 的 css-reset
也看看这个answer

【解决方案4】：

在 body 你有一个默认边距，也是因为边框的高度应该是

body{
margin:0;
}

.home-content {
   height:calc(100vh - 2px);
 }

jsfiddle

【讨论】：