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

---

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, eg:

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

---

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

As I understand that's what you need.

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

链接地址: http://www.djcxy.com/p/87502.html

上一篇: 调整子DIV的大小等于父DIV

下一篇: 动态调整字体大小以适应容器大小