html/css如何计算边距顶部为100vh-块高度

html部分（内容+上边距）应该占据整个视口
除了顶部，没有其他页边距。节中不会有太多内容
这可以通过如下设置来实现

height:60vh
margin-top:40vh

但问题是，部分高度可能会因视口宽度或内容量的变化而变化
所以，我需要一些解决方案的保证金自动计算。类似于页边空白顶部：100vh高度。

上下文
正文中有很多垂直的部分，其中一些应该像我描述的那样（一条水平线，占据vp高度的1/3-2/3，一些占据100vh，没有垂直边距。
身躯

display:flex;
flex-direction:column;

在它上面

注意事项
我知道通过
1） 将所有内容包装在不必要的div级别中
2） 使用js
但我希望避免使用这些解决方案，并尽可能将html简化。因此，我需要一种方法来计算边距或css的其他更改，以实现这一点（通常欢迎关于更改布局方法（但仅限于css）的建议）

body{display:flex；flex direction:column；}
正文>部分{最小高度：vh；边距：0；背景色：#e13652；}
.section水平{最小高度：10em；边距顶部：60vh；}

有一些内容的水平部分，它应该是视口的一部分，其余部分应该用边距填充

另一部分。但这一个占了100%的空间

另一个水平部分，内容更多，比第一个更高

假设您的示例代码是不更改html的唯一可能方法

*{
保证金：0；
填充：0；
}
身体{
显示器：flex；
弯曲方向：立柱；
}
部分{
边际上限：100vh；
身高：0；
}
第p节{
背景：#ccc；
转换：translateY（-100%）；
}
截面：非（.section卧式）p{
高度：100vh；
}

有一些内容的水平部分，它应该是视口的一部分，其余部分应该用边距填充

另一部分。但这一个占了100%的空间

另一个水平部分，内容更多，比第一个更高

我仍然不确定是否正确理解了您的问题，但请看下面的内容。如果你能进一步澄清，那将很有帮助

部分{
边框底部：1px实心#ddd；
边框顶部：1px实心#ddd；
显示器：flex；
弯曲方向：立柱；
高度：100vh；
}
第1节水平{
证明内容：柔性端；
}

有一些内容的水平部分，它应该是视口的一部分，其余部分应该用边距填充

另一部分。但这一个占了100%的空间

另一个水平部分，内容更多，比第一个更高

margin top:calc（100vh-40px）

@fubar只有在截面高度==40px的情况下才能正常工作，但正如我前面提到的，截面高度事先不知道。我也试过calc（100vh-100%），但它是100%的父对象，也就是身体，但不是100%的部分。你能在你的问题中添加一个工作示例来说明问题吗？是的，当你理解问题时，该图像对你来说可能很简单。但这并不能帮助我澄清任何事情。“将所有东西包装在不必要的div级别”-是的，大约一个（（最小）高度100vh，flex，单flex-child对齐到末尾）。。。如果这已经超出了可接受的范围，那么你就是一个难对付的客户……不完全是这样，这使得所有部分占据了100%的空间，我需要一些部分的高度来取决于它们的内容。其边距顶部=100vh-截面高度。如果截面高度大于0，则小于100%。或者以其他方式，使节+空白前的空间=100vh。我不知道还有什么好补充的。在这种情况下，我认为CBroe的建议是最简单的。