height-constraint-percent-8-ref.html 808 B

123456789101112131415161718192021
  1. <!DOCTYPE HTML>
  2. <style>
  3. div { margin-top: 0; font-size: 34px; width: 450px }
  4. #center-block { height: 80%; }
  5. #containing-block { height: 80%; }
  6. #center-col { background: yellow }
  7. p { margin-top: 0px; }
  8. </style>
  9. <!--
  10. In a 450px container, the minimum font size at 15em per line is 30px.
  11. This means we map 0px-45px into 30px-45px, so 12px gets mapped to 34px.
  12. -->
  13. <div id="containing-block">
  14. <div id="center-block">
  15. <div id="center-col">
  16. <p>Life and death, dreaming and wakefulness: stations for the perplexed soul. It traverses them by stage, taking signs and hints from things, groping about in the sea of darkness, clinging stubbornly to a hope that smilingly and mysteriously renews itself. Traveler, what are you searching for? What emotions rage in your heart?</p>
  17. </div>
  18. </div>
  19. </div>