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

我正在尝试缩小另一个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)
    });
});

最佳答案

因此，我无法仅使用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;
        }
    });
});