height-constraint-percent-5-ref.html (831B)
1 <!DOCTYPE HTML> 2 <style> 3 div { margin-top: 0; font-size: 12px; width: 450px } 4 #center-block { height: 80%; } 5 #center-col { background: yellow } 6 #containing-block { height: calc(400px + 20px); } 7 p { margin-top: 0px; } 8 9 </style> 10 <!-- 11 Because the height of the containing block is constrained, the percent height should also 12 be constrained, resulting in font inflation being disabled. 13 --> 14 <div id="containing-block"> 15 <div id="center-block"> 16 <div id="center-col"> 17 <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> 18 </div> 19 </div> 20 </div>