Make text height 100% of div?

by

To get the result I wanted, I had to use this code:

// 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');​

Thank you joshuanhibbert@css-tricks for the help!

More Related Contents:

  1. Limit text length to n lines using CSS
  2. Transparent text cut out of background
  3. Font Awesome 5 Choosing the correct font-family in pseudo-elements
  4. How to import Google Web Font in CSS file?
  5. How to make a floated div 100% height of its parent?
  6. Why should we include ttf, eot, woff, svg,… in a font-face
  7. Downloading a Google font and setting up an offline site that uses it
  8. How can I determine what font a browser is actually using to render some text?
  9. Text on image mouseover?
  10. Height 100% on flexbox column child [duplicate]
  11. CSS Div stretch 100% page height
  12. How is font size calculated?
  13. CSS: bolding some text without changing its container’s size
  14. Converting and rendering web fonts to base64 – keep original look
  15. CSS: 100% width or height while keeping aspect ratio?
  16. Equal height of elements inside grid item with CSS grid layout
  17. Multiple font-weights, one @font-face query
  18. Webpack “OTS parsing error” loading fonts
  19. Fonts looks different in Firefox and Chrome
  20. What’s the maximum pixel value of CSS width and height properties?
  21. How to add fonts to create-react-app based projects?
  22. Forcing anti-aliasing using css: Is this a myth?
  23. Inner text shadow with CSS
  24. Font weight turns lighter on Mac/Safari
  25. Align text to the bottom of a div
  26. How to prevent different browsers rendering fonts differently?
  27. Twitter Bootstrap: div in container with 100% height
  28. CSS: transform: translate(-50%, -50%) makes texts blurry [duplicate]
  29. Issue when centering vertically with flexbox when heights are unknown
  30. How to add a custom font to Rails app?

Leave a Comment