使用css动态更新容器高度

我想实现一个布局，其中包括3个单元

固定收割台（位置：fixed；）

B左菜单

C主容器

html, body {height: 100%}

#content {min-height: 100%}

A和B具有固定高度

C填充剩余空间（仅剩余高度）。 使用CSS，我如何实现这个结果

只有当C形截面高度小于车身/车窗高度时，才会出现此问题

对于以下内容，您可以获得如何实现此结果的示例。但它只在有一列的情况下起作用

---

您可能不得不使用JavaScript来调整“C”的大小，因为CSS不会填满浏览器窗口。

我认为使用纯CSS最接近C对象的是

最小高度。我之所以说“最近”，是因为并非所有浏览器都支持这一点，而且它也不会总是完全填满垂直空间。这将是一个估计值，如果您在C对象下放置任何内容，如果窗口不够高，无法显示您设置的最小高度，则它可能不会在浏览器中显示而不滚动

另外，带有百分比值的
minheight
没有任何作用，这就是为什么在JSFIDLE示例中没有得到想要的结果。您必须使用非百分比值，如300px或其他。下面是一个在实践中证明这一点的例子。取消注释额外的
Test
行，查看内容高于最小高度时会发生什么

另一种选择是跳转到JavaScript并在页面加载时动态设置C的高度，但这可能会变得混乱（对于跨浏览器解决方案）。
好的，最后我找到了解决方案

诀窍是将最外层元素的高度设置为100%

然后，设置100%高度的一般规则是在内容容器上设置最小高度

html, body {height: 100%}

#content {min-height: 100%}

这就是工作示例。
什么差距？你想让它填满这一页的高度吗？如果C的内容会导致页面滚动，你希望它做什么？顺便说一句，高度：100%在现代浏览器中并没有任何作用。高度将始终占据它所需要的，除非您指定一个特定的值，如600px等。我希望C部分填充窗口大小。如果C单元格导致页面滚动，则没有问题，因为空空间将被C填满。问题就在C的高度小于窗口大小时！通过以下链接，您可以获得如何实现此结果的示例。但它只在有一列的情况下起作用。