Javascript 如何使用CSS在另一个div中缩小一个div？

我试图缩小另一个div（divA）内部的div（divB）。问题是divA的高度是由其内容指定的。当divB缩小时，divA的高度不会改变。。。当应用变换时会发生这种情况，因为它实际上并没有改变像素数，而是改变了像素本身的大小（至少我很确定这就是发生的情况）。因此，简单的解决方法是手动将divA的高度设置为divB的大小乘以比例因子

但是，如果我这样做，我需要在每次divA内容更改时手动重置高度。在我的情况下，这是非常麻烦的，因为将有大量的变化，以女主角的内容。所以，我想知道是否有一种更简单的方法可以做到这一点，最好是使用CSS

下面是一个简单的JSFIDLE来演示这个问题：

只要添加一些元素，缩小比例，你就会明白我说的高度不调整的意思。如果单击“固定高度”，则它将正确调整高度，但如果添加更多元素，则高度不会调整，除非再次进行固定

html

<div>
    <div class="wrapper">
        <div id="scalar"></div>
    </div>
    <div class="buttons">
        <div id="button">
            <input type="button" value="Add" />
        </div>
        <div id="scaleDown">
            <input type="button" value="Scale Down" />
        </div>
        <div id="scaleUp">
            <input type="button" value="Scale Up" />
        </div>
        <div id="fixHeight">
            <input type="button" value="Fix Height" />
        </div>
    </div>
</div>

jquery

var section = $("<div class='section'></div>")

$(document).ready(function () {
    $("#button").children().click(function () {
        $("#scalar").append(section.clone(false));
    });

    $("#scaleDown").children().click(function () {
        $("#scalar").addClass("scaleDown");
    });

    $("#scaleUp").children().click(function () {
        $("#scalar").removeClass("scaleDown");
    });

    $("#fixHeight").children().click(function () {
        $(".wrapper").height($("#scalar").height()*.75)
    });
});

var节=$（“”）
$（文档）.ready（函数（）{
$（“#按钮”）.children（）。单击（函数（）{
$（“#标量”）.append（section.clone（false））；
});
$（“#scaleDown”）.children（）。单击（函数（）{
$（“#scalar”）.addClass（“scaleDown”）；
});
$（“#scaleUp”）.children（）。单击（函数（）{
$（“#scalar”）.removeClass（“scaleDown”）；
});
$（“#固定高度”）.children（）。单击（函数（）{
$（“.wrapper”）.height（$（“#标量”）.height（）*.75）
});
});

因此，我无法仅使用CSS找到答案，但我确实找到了一个相当简单的javascript解决方案。有一个名为“DOMSubtreeModified”的DOM事件，每次更改当前元素层次结构中的任何元素时都会触发该事件。因此，我所做的是测试每次触发此事件时元素的高度是否与之前的高度不同。如果不同，则相应地进行设置。通过这种方式，您可以捕获所有动态高度变化，而不考虑具体改变高度的内容

这里有一把小提琴来演示这个想法：

HTML

<div class="wrapper">
    <div id="scalar"></div>
</div>
<div class="buttons">
    <div id="button">
        <input type="button" value="Add" />
    </div>
</div>

JS

.wrapper {
    float:right;
    width: 200px;
    background-color: black;
}
.section {
    margin-left:75px;
    height: 50px;
    width: 50px;
    background-color: red;
}
.buttons {
    float:left;
}
#scalar
{
    -webkit-transform: scale(0.75);
    -moz-transform: scale(0.75);
    -ms-transform: scale(0.75);
    transform: scale(0.75);
    -webkit-transform-origin: 50% 0 0;
    -moz-transform-origin: 50% 0 0;
    -ms-transform-origin: 50% 0 0;
    transform-origin: 50% 0 0;
}

var section = $("<div class='section'></div>")
var scaleFactor = 0.75;
var originalHeight = 0;

$(document).ready(function () {
    $("#button").children().click(function () {
        $("#scalar").append(section.clone(false));
    });

    $(".wrapper").bind('DOMSubtreeModified', function() {
        var height, heightOffset;

        height = $("#scalar").height();
        if (height && originalHeight !== height) {
            heightOffset = height * scaleFactor;
            $(this).height(heightOffset);
            return originalHeight = height;
        }
    });
});

var节=$（“”）
var scaleFactor=0.75；
变量原始高度=0；
$（文档）.ready（函数（）{
$（“#按钮”）.children（）。单击（函数（）{
$（“#标量”）.append（section.clone（false））；
});
$（“.wrapper”）.bind（'domsubtredemodified'，function（）{
变量高度、高度偏移；
高度=$（“#标量”）.height（）；
if（高度和原始高度！==高度）{
heightOffset=高度*比例因子；
$（此）。高度（高度偏移）；
返回原始高度=高度；
}
});
});

不要将随机文本标记为代码，以避开问题中包含代码的要求，从而发布到JSFIDLE的链接。实际上，请遵守规则并添加代码。该问题的可能重复项与此类似，但我想知道是否有某种方法可以解释这一点，而无需明确设置divA内容每次更改的高度。包括“DOMSubtreeModified”在内的MutationEvents已被弃用。。。它们被突变观察员所取代。请看这里：

var section = $("<div class='section'></div>")
var scaleFactor = 0.75;
var originalHeight = 0;

$(document).ready(function () {
    $("#button").children().click(function () {
        $("#scalar").append(section.clone(false));
    });

    $(".wrapper").bind('DOMSubtreeModified', function() {
        var height, heightOffset;

        height = $("#scalar").height();
        if (height && originalHeight !== height) {
            heightOffset = height * scaleFactor;
            $(this).height(heightOffset);
            return originalHeight = height;
        }
    });
});