percent-height-child-ref.html (920B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <style> 9 div.button { 10 display: inline-block; 11 width: 80px; 12 border: 0; 13 padding: 0; 14 15 font: 10px sans-serif; 16 text-align: center; 17 vertical-align: top; 18 19 color: black; 20 background: gray; 21 } 22 23 div.p80 { 24 background: pink; 25 } 26 27 div.p100 { 28 background: yellow; 29 } 30 </style> 31 </head> 32 <body> 33 <!--Button has explicit height for us to resolve against: --> 34 <div class="button" style="height: 100px"> 35 <div class="p80" style="margin-top: 10px; height: 80px">abc</div> 36 </div> 37 38 <div class="button" style="height: 100px"> 39 <div class="p100" style="height: 100px">abc</div> 40 </div> 41 42 <!--Button is using intrinsic height: --> 43 <div class="button"> 44 <div class="p80">abc</div> 45 </div> 46 47 <div class="button"> 48 <div class="p100">abc</div> 49 </div> 50 51 </body> 52 </html>