Dynamically change font size according to container size

Question

You need to create a template with the following functions:

• containing two containers (rows)
  • fixed line top
  • sizes of the lower sizes to the maximum available vertical space
• the text (font size) inside the bottom container must be dynamically resized to fit the height of the container .

The answer to the first question is simple, but adds it here, because I do not know how the second question does not depend on it.

There are already many questions that ask about how to dynamically resize text in a text field or in input fields. But this question is more specific, because you probably need to count words or something else to fit the size of the container.

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

I am not a web designer and I want to make only one simple web page template that will be used for my texts - I know a bit of css, but not javascript, so I ask for a pointer to any "ready to use", run, if exists .. .

EDIT

Checking for overflow solutions, this answer https://stackoverflow.com/a/166805/ works fine to detect vertical overflow. Now the questions: how to add the above javascript overflow check to the loop, which will change my font to a smaller one.

To better illustrate the attachment of two demo images ...

Answer 1

Basically, you need the following:

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

So you should check questions with

• how to detect scroll
• how to detect overflow

etc., for example:

• Is there a way to fire an event when a vertical overflow is detected in a div?
• Detecting overflow or missing WITHOUT javascript
• How to detect overflow in div element?
• Check if the HTML element has scrollbars
• CSS - apply a different style if the content overflows to a new line
• Determine if the content of an HTML element is full

possibly many others.

You may not have searched for the right keyword, but this is probably a duplicate. :)

Answer 2

I think you could check this question: JavaScript Scale Text to install in Fixed Div

As I understand it, what you need.

EDIT: I found something really interesting in Gist: https://gist.github.com/mekwall/1263939