使用flex[复制]使内部div填充剩余高度
我试图让id为的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>
共有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>
在身体上，你有一个默认的边距，也因为边框的高度应该是
body{
margin:0;
}
.home-content {
height:calc(100vh - 2px);
}
JSFIDLE
我编辑了@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>-
问题内容： 如何使div填充剩余宽度？ 我如何才能填满其余部分？ 问题答案： 试试这样的事情： div自然会占用其容器的100％宽度，因此无需显式设置此宽度。通过添加与两侧div相同的左/右页边距，它自己的内容被强制置于它们之间。 请注意，“中间格”云 后 的HTML“正确的div”
-
问题内容： 我正在一个Web应用程序上工作，我希望其中的内容能填满整个屏幕的高度。 该页面具有标题，其中包含徽标和帐户信息。这可以是任意高度。我希望内容div将页面的其余部分填充到底部。 我有一个标题和一个内容。目前，我正在使用表格进行布局，如下所示： CSS和HTML 页面的整个高度已填满，不需要滚动。 对于content div中的任何内容，设置将其放在标题的正下方。有时，内容将是一个实际表，
-
问题内容： 我想要一个两列的div布局，其中每个可以具有可变的宽度，例如 我希望’view’div扩展到’tree’div填充所需空间后可用的整个宽度。 目前，我的“视图” div已调整为包含它的内容的大小，如果两个div都占据整个高度，那也会很好。 问题答案： 这个问题的解决其实很容易，但不是在 所有 明显。您必须触发一种称为“块格式设置上下文”（BFC）的东西，它以特定的方式与浮点数交互。 只
-
问题内容： 我有2个div： 页面左侧有一个，右侧是一个。左侧的一个宽度固定，我希望右侧的一个填充剩余空间。 问题答案： 这似乎可以完成您想要的。
-
问题内容： 我在flexbox中并排有2个div。右手应始终具有相同的宽度，我希望左手仅抓住剩余空间。除非我专门设置宽度，否则它不会。 因此，现在将其设置为96％，直到您真正按下屏幕为止，它看起来还可以-右div有点饿了它所需的空间。 我想我可以保留原样，但感觉不对，就像必须要说的那样： 正确的人永远是相同的； 你在左边-你得到剩下的一切 问题答案： 使用该属性可以使弹性项目消耗 主轴上的 可用空
-
问题内容： +--------------------+ | | | | | | | | | 1 | | | | | | | | | +--------------------+ | | | | | | | | | 2 | | | | | | | | | +--------------------+ 如上所示的（1）的内容是未知的，因为它在动态生成的页面中可能会增加或减少。如上所示，第二个div（