javascript - Dynamically resize font size to fit container size

Question

Need make an template with the following features:

• containing two containers (rows)
  • the top row is fixed size
  • the bottom sizes itself to maximum available vertical space
• the text (font size) inside the bottom container should be dynamically resized to fit the container height.

The answer to 1st question is simple, but adding it here, because don't know than the second question is not depending on it.

Here are already many questions what asking how to dynamically resize the text in the textarea or input fields. But this question is more special, because probably need counting words or somewhat other to fit the container size.

Can please someone help me with some pointers to already done jquery or any other js/css solution?

I'm not a web designer and want make only one simple web page template what will use to fit my texts - i know a little bit css - but not javascript - therefore asking to the pointer to any "ready-to-run" solution, if exists...

EDIT

Checking overflow solutions, this answer https://stackoverflow.com/a/7138971/869025 works nicely to detect vertical overflow. Now the questions is, how to add the above overflow javascript check to the cycle, what will change my font to smaller.

For the better illustrating attaching two demo images...

Answer 1

Basically, you need the next:

while( is_overflow_in_the_second_div() ) {
    set_smaller_font();
}

So, you should check questions with

• how to detect scrolbars
• how to detect overflow

and like, e.g.:

• is there a way to fire a event when vertical overflow is detected in a div?
• Detecting whether there's overflow or not WITHOUT javascript
• How to detect overflow in div element?
• Check whether HTML element has scrollbars
• CSS - Apply Another Style if Content Overflows to New Line
• Determine if an HTML element's content overflows

maybe many others.

Maybe you don't searched the questions for the right keyword, but this is probably an duplicate. :)