details-percentage-height-children-ref.html (606B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 - http://creativecommons.org/publicdomain/zero/1.0/ --> 4 5 <html> 6 <style> 7 div#details { 8 background-color: orange; 9 width: 500px; 10 height: 300px; 11 } 12 div#summary { 13 background-color: green; 14 width: 50%; 15 height: 40%; 16 } 17 div#inner { 18 background-color: cyan; 19 width: 50%; 20 height: 60%; 21 } 22 </style> 23 <body> 24 <div id="details"> 25 <div id="summary">Summary: 40% height</div> 26 <div id="inner">Div: 100% height, inside 60% height ::details-content pseudo</div> 27 </div> 28 </body> 29 </html>