height-constraint-percent-1-ref.html (711B)
1 <!DOCTYPE HTML> 2 <style> 3 div { font-size: 34px; width: 450px } 4 #center-block { height: 80%;} 5 #center-col { background: yellow; } 6 p { margin-top: 0px; } 7 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="center-block"> 14 <div id="center-col"> 15 <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> 16 </div> 17 </div>