我在现有框架内工作，因此我可以编辑的 CSS/HTML 有限。我在父级中有两个子 DIV，我希望分别为父级高度的 80% 和 20%。但是，由于 parent 有“ margin :自动；”我无法达到工作高度。
有人可以帮忙吗？我知道我可以使用 JS 来解决这个问题，但我强烈建议不要这样做。如果可能的话，我更喜欢 CSS 修复。
请注意，因为我在第 3 方产品框架内工作，所以我无法更改标记区域以外的 HTML 或 CSS。
有关问题的示例，请参阅 jsFiddle:https://jsfiddle.net/6vb5910m/
谢谢
<html>
<body>
<div class="flexer">
<div class="template-container">
<div class="template-contents">
<!-- Cannot change anything above this line -->
<div class="ztop" style="background: rgb(200,0,0,0.3);">
I am 80% of Parent Height
</div>
<div class="zbottom" style="background: rgb(0,200,0,0.3);">
I am 20% of Parent Height
</div>
<!-- Cannot change anything below this line -->
</div>
</div>
</div>
</body>
最佳答案
如果您的 parent 的高度是auto，恐怕这是不可能的。
父级将始终扩展以包含所有子级，因此它的高度取决于子级的高度。
如果你的 child 也依赖于 parent 的高度，你就会陷入无限循环。
我认为唯一的解决方案是使用一些 Javascript，通过它您可以动态获取父级高度并将正确的高度应用于子级。
或者，如果您不需要此页面上的auto 高度，您可以直接在源代码中覆盖template-contents 的高度，因此它不适用到其他页面？
<html>
<body>
<div class="flexer">
<div class="template-container">
<div class="template-contents">
<!-- Cannot change anything above this line -->
<style>
.template-contents {
height: 100%;
}
</style>
<div class="ztop" style="background: rgb(200,0,0,0.3);">
I am 80% of Parent Height
</div>
<div class="zbottom" style="background: rgb(0,200,0,0.3);">
I am 20% of Parent Height
</div>
<!-- Cannot change anything below this line -->
</div>
</div>
</div>
</body>
</html>
关于html - 由于父边距自动，无法使子 DIV % 高度起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52566858/