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

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

1 个答案: