使用 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 填充剩余高度 [重复]的主要内容，如果未能解决你的问题，请参考以下文章