1

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

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

谢谢！

4

1 回答 1

0

我在这里发现了一个类似的问题：如何自动调整 div 内文本的大小？

我对你的代码做了一些修改。将 P 替换为 DIV 并添加了一个 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
};
于 2013-10-22T09:10:28.940 回答