自动调整div的大小

Question

This is another of the infinite questions about how to get div sizing to behave, but conversely I haven't been able to find a sufficiently similar question to get my particular case working.

 function update() { $('#container .body-text').bigText({verticalAlign:'top',whiteSpace:'pre'}); } function doresize(form) { var container = $('#container')[0]; container.style.height = form.height.value + 'px'; setTimeout(500, update); } function dotext(form) { $('#container .body-text').text(form.text.value); update(); } update(); 

 .container { float: left; border: solid 1px black; position: relative; margin-left: 5px; width: 20%; height: 200px; padding: 2px; } .header { width: 100%; height: 64px; background-color: blue; } .body { width: 100%; height: 100%; max-height: calc(100% - 64px); background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://rawgithub.com/DanielHoffmann/jquery-bigtext/master/jquery-bigtext.js"></script> <form name="setup"> <label>Set height: <input type="number" name="height" value="200" /></label> <button type="button" onclick="doresize(this.form)">Resize</button><br /> <label>Set text: <textarea name="text">Multi-Line Text</textarea></label> <button type="button" onclick="dotext(this.form)">Change</button><br /> </form> <br /> <div id="container" class="container" onload="update()"> <div class="header"></div> <div class="body"><div class="body-text">Multi-Line Text</div></div> </div> 

The above snippet shows a fairly basic layout with a container div with a width and height that are controlled by outside forces. (In the real code this is controlled by the browser window resizing, but I've put in a basic form height adjustment here for demonstration purposes.)

What I'm trying to achieve with this is the following:

1. Both internal divs fill to 100% width of their parent.
2. The top (blue) div has a fixed height.
3. The bottom (green) div will use the remaining space in the parent by default.
4. However, after a bit of existing JS code resizes the font size of the text to best-fit this space (both width and height)...
5. If the container is tall enough and the text is short enough that there's extra space below, then the green div should vertically shrink to fit its text and both the blue and green divs should then appear vertically centred in the container div.
6. If the container size or the text changes, repeat the process of fitting the text and recentering.

I know how to do most of the pieces individually, I'm just not sure how to put it all together, and whether step 5 is possible with CSS or whether it requires JS. (I've tried adding the vertical centering with CSS via the absolute-translate-50% trick, which works great at tall container sizes or text that is wider than it is tall, but not the other way around -- the text overflows the green div because the height is not fixed so can't be taken into account by the font sizing script.)

I'm ok with rearranging or inserting additional divs if this is required.

---

EDIT : the following snippet inspired by Shadi's answer seems to do the trick:

 function update() { var text = $('#container .body-text'); text.parent().parent().css('height', '100%'); text.parent().css('height', '100%'); text.bigText({verticalAlign:'top',whiteSpace:'pre'}); text.parent().css('height', text.height()); text.parent().parent().css('height', text.height() + 64); } function doresize(form) { $('#container').css('height', form.height.value); update(); } function dotext(form) { $('#container .body-text').text(form.text.value); update(); } update(); 

 .container { float: left; border: solid 1px black; margin-left: 5px; width: 20%; height: 200px; padding: 2px; } .subcontainer { position: relative; width: 100%; height: 100%; top: 50%; transform: translateY(-50%); } .header { width: 100%; height: 64px; background-color: blue; } .body { width: 100%; height: 100%; max-height: calc(100% - 64px); background-color: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <script src="https://rawgithub.com/DanielHoffmann/jquery-bigtext/master/jquery-bigtext.js"></script> <form name="setup"> <label>Set height: <input type="number" name="height" value="200" /></label> <button type="button" onclick="doresize(this.form)">Resize</button><br /> <label>Set text: <textarea name="text">Multi-Line Text</textarea></label> <button type="button" onclick="dotext(this.form)">Change</button><br /> </form> <br /> <div id="container" class="container"> <div class="subcontainer"> <div class="header"></div> <div class="body"><div class="body-text">Multi-Line Text</div></div> </div> </div> 

Try values between 80 and 300 to see it in action.

Answer 1

I have tried this in a code, please would you try it and see if it fits your need, the following code will make the green div fullfil the remining container height, and then after calcuating the text size and width it shrinks to fit the new text height

function update() {
        $('#container').css('height', '200px' /*this would be dynamic based on the container height*/);
        $('#container .body-text').bigText({ verticalAlign: 'top', whiteSpace: 'pre' });
        $('#container').css('height', $('#bodytxt').height() + 64 /*this is the header height - blue div*/);
    }

You need also to add an id for your bodytext div:

<div id="bodytxt" class="body-text">Multi-Line Text</div>