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

Question

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

但是，如果我这样做，每次 divA 的内容发生变化时，我都需要手动重置高度。就我而言，这非常麻烦，因为 divA 的内容会有很多变化。所以，我想知道是否有更简单的方法可以做到这一点，最好使用 CSS。

这里有一个简单的 JSFiddle 来演示这个问题：http://jsfiddle.net/turtlewaxer1100/82cux/8/

只需添加一些元素，按比例缩小，您就会明白我所说的高度未调整是什么意思。如果您单击“修复高度”，那么它会正确调整高度，但是如果您添加更多元素，除非您再次修复它，否则高度不会调整...

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>

css

.wrapper {
    float:right;
    width: 200px;
    background-color: black;
}
.section {
    margin-left:75px;
    height: 50px;
    width: 50px;
    background-color: red;
}
.buttons {
    float:left;
}
.scaleDown {
    -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;
}

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)
    });
});

Answer 1

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

这是一个演示这个想法的小提琴：http://jsfiddle.net/turtlewaxer1100/E6D2H/5/

HTML

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

CSS

.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;
}

JS

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;
        }
    });
});