html – 由于父边距自动,无法获得子DIV％高度

2023年7月30日 204次阅读

我在现有框架内工作,因此我可以编辑的CSS /
HTML受限制.在父母中我有两个孩子DIV,我想要80％和父母身高的20％.但是,由于父母有’margin：auto;’我无法达到工作的高度.

有人可以帮忙吗？我知道我可以使用JS来解决这个问题,但是有一个强烈的偏好.如果可能的话,更喜欢CSS修复.

请注意,因为我在第三方产品框架内工作,所以我无法在标记的区域之外更改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>

最佳答案 如果你的父母有一个自动高度,我担心这是不可能的.

父级将始终扩展以包含所有子级,因此其高度取决于子级的高度.

如果您的孩子也依赖于父高,那么您将拥有无限循环.

我认为唯一的解决方案是使用一些Javascript,您可以使用它来动态获取父高度并为子项应用正确的高度.

或者,如果您不需要此页面上的自动高度,您可以直接在源中覆盖模板内容的高度,以便它不适用于其他页面？

<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>
点赞