Question

我想有两个div（左和右），它们占浏览器宽度的50％和浏览器高度的100％（用于在信息显示屏上显示全屏），并将每个div大小的内容设置为availbale空间。这有可能吗？

到目前为止，这是我的CSS：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>

谢谢！

Answer 1

我在这里发现了类似的问题：How to automatically resize the size of text inside a div?

我对你的代码做了一些修改。用DIV替换P并添加了一个jQuery函数：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");
  }
});

您可以将此功能添加到window.onresize，它将动态适合您的文本。但是，您正在使用填充和H1标头，这需要与WHILE参数一起玩。

附加到窗口调整大小功能：

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

调整文本大小以适合浏览器中的可用空间

1 个答案: