javascript - 如何使用 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 事件，每次更改当前元素层次结构中的任何元素时都会触发该事件。所以，我所做的是在每次触发此事件时测试元素的高度是否与之前的高度不同。如果不同，则相应地进行设置。通过这种方式，您可以捕获所有动态高度变化，而无需考虑是什么具体改变了高度。

这是一个演示这个想法的 fiddle :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;
        }
    });
});