Sizing text to fit availble space in browser

Question

I would like to have two divs (left and right) which take each 50% of browser width and 100% of browser height (for displaying fullscreen on info display), and make the content of each div size to the availbale space. Is this possible at all?

Here is my CSS so far: http://jsfiddle.net/n3ug7/

<div class="left" id="test1">
    <h1>Dit is een eerste event</h1>
    <p>Dat schrijft De Morgen. Zelfs als er een bouwvergunning is verleend kan een buur alsnog protest aantekenen. Jaarlijks komen er zo'n 880 dossiers binnen bij de bevoegde instanties. De Raad voor Vergunningsbetwistingen werd in 2009 in het leven geroepen om 'snel' een beslissing te nemen in die dossiers, maar ook die kijkt dus volgens De Morgen al tegen een enorme achterstand aan. </p>
</div>
<div class="right" id="test2">
    <h1>Dit is een tweede event</h1>
    <p>Dat schrijft De Morgen. Zelfs als er een bouwvergunning is verleend kan een buur alsnog protest aantekenen. Jaarlijks komen er zo'n 880 dossiers binnen bij de bevoegde instanties. De Raad voor Vergunningsbetwistingen werd in 2009 in het leven geroepen om 'snel' een beslissing te nemen in die dossiers, maar ook die kijkt dus volgens De Morgen al tegen een enorme achterstand aan. </p>
</div>

Thanks!

score 0 · Accepted Answer · edited May 23 '17 at 11:50

I found a similar problem here: How to automatically resize the size of text inside a div?

And I made a little modification on your code. Replaced P with DIV and added a jQuery function: JSFiddle

$(function () {
  $('#test1 div').css('font-size', '1em');
  $('#test2 div').css('font-size', '1em');

  while ($('#test1 div').height() + $('#test1 h1').height() < $('#test1').height()) {
      $('#test1 div').css('font-size', (parseInt($('#test1 div').css('font-size')) + 1) + "px");
  }
  while ($('#test1 div').height() + $('#test1 h1').height() > $('#test1').height()) {
      $('#test1 div').css('font-size', (parseInt($('#test1 div').css('font-size')) - 1) + "px");
  }

  while ($('#test2 div').height() + $('#test2 h1').height() < $('#test2').height()) {
      $('#test2 div').css('font-size', (parseInt($('#test2 div').css('font-size')) + 1) + "px");
  }
  while ($('#test2 div').height() + $('#test2 h1').height() > $('#test2').height()) {
      $('#test2 div').css('font-size', (parseInt($('#test2 div').css('font-size')) - 1) + "px");
  }
});

And you can add this function to window.onresize and it will dynamically fit your text. However you are working with padding and a H1 header and that would require a little play with WHILE parameters.

Appending to window resize function:

window.onresize = function() {
... // function body
};

Sizing text to fit availble space in browser

1 Answers1