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...