Trying to resize a nested div (divB) within another div (divA) is proving challenging. The issue arises when the height of divA is determined by its content. When divB is resized, divA's height remains unchanged... This occurs due to the application of a transform because it does not alter the pixel count; instead, it adjusts the size of the pixels themselves (or at least that's what seems to be happening). To resolve this dilemma, one can manually set the height of divA to the product of divB's size and the scaling factor.
However, manual adjustment of divA's height becomes tedious whenever changes occur in the content of divA. In my scenario, where there will be numerous alterations to divA's content, this method proves cumbersome. Hence, I am curious if there exists a simpler approach to address this issue, preferably utilizing CSS.
The problem can be visually demonstrated through a simple JSFiddle: http://jsfiddle.net/turtlewaxer1100/82cux/8/
To experience the issue firsthand, add elements, scale down, and observe the lack of adjustment in height. Clicking "Fix Height" rectifies the height measurement but necessitates readjustment upon further element addition...
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)
});
});