14

テキストの高さを 100% にしようとしていますdivが、うまくいきません。
そのまま100%になりbody { font-size:?; }ます。

divの高さに従う方法はありますか?
高さはページ全体のdiv4% であり、サイズ変更/解像度の変更時にテキストを追従させたくありません。

4

5 に答える 5

11

希望する結果を得るには、次のコードを使用する必要がありました。

// Cache the div so that the browser doesn't have to find it every time the window is resized.
var $div = $('li.leaf.item');

// Run the following when the window is resized, and also trigger it once to begin with.
$(window).resize(function () {
   // Get the current height of the div and save it as a variable.
   var height = $div.height();
   // Set the font-size and line-height of the text within the div according to the current height.
   $div.css({
      'font-size': (height/2) + 'px',
      'line-height': height + 'px'
   })
}).trigger('resize');​

joshuanhibbert @ css-tricksに助けてくれてありがとう！

于 2012-05-24T10:41:22.340 に答える
5

2015 では、ビューポート ユニットを使用できます。これにより、ビューポートの高さの 1% を表す高さ単位でフォント サイズを設定できます。

したがって、あなたの場合font-size: 4vh、望ましい効果が得られます。

注：あなたが尋ねたように、これは親divに相対的ではなく、ビューポートの高さに相対的です。

于 2015-08-12T11:43:06.543 に答える
4

CSS を使用すると、これを実現できません。その代わりに、javascript を使用します。

これらを確認してください：

  1. http://fittextjs.com/
  2. divのサイズに応じてフォントサイズを変更する
  3. div に収まるようにフォントのサイズを変更する
于 2012-05-23T11:26:47.023 に答える
1

CSS のみを使用して div の 100% サイズのテキストが必要な場合は、font-size および line-height プロパティを変更する必要があります。ここに私の解決策があります：

.divWithText {
    background-color: white;
    border-radius: 10px;
    text-align: center;
    text-decoration: bold;
    color: black;

    height: 15vh;
    font-size: 15vh;
    line-height: 15vh;
}
于 2016-10-05T15:22:33.243 に答える
-7

これを試して

font
{
  position:absolute;
  width:100%;
  height:100%;
  font-family:Verdana, Geneva, sans-serif;
  font-size:15px;
  font-weight:normal;
}
于 2012-05-23T11:37:28.717 に答える