Сделать высоту текста 100% от div?

Я пытаюсь сделать текст 100% высоты div, но он не работает.
Это просто становится 100% от body { font-size:?; }.

Есть ли способ сделать это, следуя высоте div?
Высота div составляет 4% от всей страницы, и я не буду следовать за текстом, когда вы измените размер/измените разрешение.

Ответы

Ответ 1

Чтобы получить результат, который я хотел, мне пришлось использовать этот код:

// 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-трюки за помощь!

Ответ 3

В 2015 году вы можете использовать единицы просмотра. Это позволит вам установить размер шрифта в единицах высоты, составляющих 1% высоты видового экрана.

Итак, в вашем случае font-size: 4vh достигнет желаемого эффекта.

Примечание: это не относится к родительскому div, как вы просили, но относительно высоты окна просмотра.

Ответ 4

Если вам нужен текст со 100% размером div, использующий только CSS, вы должны изменить свойства 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;
}

Ответ 5

попробуйте это

font
{
  position:absolute;
  width:100%;
  height:100%;
  font-family:Verdana, Geneva, sans-serif;
  font-size:15px;
  font-weight:normal;
}