Html 灵活的页眉、内容、页脚布局

在下面的代码中，我希望内容部分填充到页脚碰到屏幕底部的位置

编辑：也许我应该更清楚一点中心对齐。页眉和页脚应垂直对齐，所有三项都需要从左垂直线开始，如下所示：

我怎样才能做到这一点

html，正文{
保证金：0；
填充：0；
}
容器{
显示器：flex；
弯曲方向：立柱；
位置：固定；
排名：0；
宽度：100%；
}
标题{
高度：92px；
背景色：#FFFFFF；
边框：1px实心#DCE5EB；
}
页脚{
高度：92px；
边框：1px实心#DCE5EB；
背景色：#FFFFFF；
}
.内容{
高度：700px；
flex：自动；
背景色：#FFFFFF；
}

标题
内容
页脚

你忘了在你的课程

内容中添加
=
。
那是个简单的打字错误

和你的内容。因为您有
页眉
和
页脚
的静态高度。
你可以给你的内容提供代码<100vh <代码>的高度，并降低<>代码>页眉和页脚>代码>加上不要忘记考虑<代码>边框 > e >代码> 2px合计。
它会解决你的问题

编辑：垂直对齐可以通过指定
行高度
等于
高度
来实现。
并将其与您的页边距对齐。您可以使用，
边距
或
填充
，具体取决于您的要求。
或者你甚至可以使用

display:flex;
align-items:center;

从内容中删除
94px
+
94px


html，
身体{
保证金：0；
填充：0；
}
容器{
显示器：flex；
弯曲方向：立柱；
排名：0；
边框：10px纯黑；
}
标题{
显示器：flex；
对齐项目：居中；
高度：92px；
背景色：#FFFFFF；
边框：1px实心#DCE5EB；
填充：0 30px；
}
页脚{
高度：92px；
显示器：flex；
边框：1px实心#DCE5EB；
背景色：#FFFFFF；
对齐项目：居中；
填充：0 30px；
}
.内容{
最小高度：计算（100vh-94px-94px）；
背景色：#FFFFFF；
填充：0 30px；
}

标题
内容
页脚
除了flexbox，您还可以使用CSS网格创建此布局



html，
身体{
保证金：0；
身高：100%；
}
.集装箱{
显示：网格；
网格模板行：92px 1fr 92px；
身高：100%；
}
标题，
页脚{
显示器：flex；
对齐项目：居中；
边框：1px实心#DCE5EB；
}
.内容{
溢出：自动；
}

标题
Lorem ipsum dolor sit amet，奉献精英。如果你是一个有类似过失的人，你就可以在你的身体里找到一个合适的位置<洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum Door sit amet），是一位杰出的献身者。如果你是一个有类似过失的人，你就可以在你的身体里找到一个合适的位置<洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum Door sit amet），是一位杰出的献身者。如果你是一个有类似过失的人，你就可以在你的身体里找到一个合适的位置<洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum Door sit amet），是一位杰出的献身者。如果你是一个有类似过失的人，你就可以在你的身体里找到一个合适的位置<洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum Door sit amet），是一位杰出的献身者。如果你是一个有类似过失的人，你就可以在你的身体里找到一个合适的位置<洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum Door sit amet），是一位杰出的献身者。如果你是一个有类似过失的人，你就可以在你的身体里找到一个合适的位置<洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum Door sit amet），是一位杰出的献身者。如果你是一个有类似过失的人，你就可以在你的身体里找到一个合适的位置<洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum Door sit amet），是一位杰出的献身者。如果你是一个有类似过失的人，你就可以在你的身体里找到一个合适的位置<洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum Door sit amet），是一位杰出的献身者。如果你是一个有类似过失的人，你就可以在你的身体里找到一个合适的位置<洛雷姆·伊普苏姆·多洛尔·希特·阿梅特（Lorem ipsum Door sit amet），是一位杰出的献身者。如果你是一个有类似过失的人，你就可以在你的身体里找到一个合适的位置！
页脚
因为您没有真正解释为什么会这样，所以
vh
单位相对于浏览器视口高度进行测量。这意味着它完全响应所有不同的屏幕大小。因此，如果您将容器的总和设置为
100vh
，它们将完全填满屏幕。谢谢。我仍然需要对齐这三个部分。请查看编辑后的原始帖子。你是如何获得这些边框的？你在使用保证金吗？谢谢，但我正在寻找flex解决方案。另外，您的解决方案将所有内容移动到父div的最左边。我希望它们位于屏幕中间的一个部分的最左边。请参考原始帖子中的图表。@ZeroDarkThirty您需要澄清元素应该在左侧对齐的位置。使用网格，您可以轻松创建列。所有三个列都是：页眉、内容和页脚。同样，不是最父div的左边，而是内部垂直线。@ZeroDarkThirty我知道您希望所有三个元素都对齐到“内部垂直线”-但是，我猜不出该线应该从哪里开始。这是任意的