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

Posted

技术标签:

【中文标题】使用 flex 使内部 div 填充剩余高度 [重复]【英文标题】:Make inner div fill remaining height using flex [duplicate] 【发布时间】: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; 【参考方案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

【讨论】:

以上是关于使用 flex 使内部 div 填充剩余高度 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

使一个 div 填充剩余屏幕空间的高度

使一个 div 填充剩余屏幕空间的高度

使一个 div 填充剩余屏幕空间的高度

使一个 div 的高度填充剩余空间,但不要越过另一个 div [重复]

如何使弹性项目不填充弹性容器的高度? [复制]

Flex Div 的高度不是 100%