方式1，使用flex
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body { padding: 0; margin: 0; /* height: 2400px; */ height: 100%; background: lightgray; } .body { display: flex; background: yellow; box-sizing: border-box; min-height: 600px; padding: 10px; } .child { flex-basis: 100px; } .childchild { height: 100%; background: red; } </style> </head> <body> <div class="body"> <div class="child"> <div class="childchild"></div> </div> </div> </body> </html>
方式2，使用grid
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body { padding: 0; margin: 0; /* height: 2400px; */ height: 100%; background: lightgray; } .body { display: grid; min-height: 600px; background: yellow; padding: 10px; } .child { height: 100%; background: red; } </style> </head> <body> <div class="body"> <div class="child"> </div> </div> </body> </html>
使min-height子元素height百分比生效的2种方式
原文：https://www.cnblogs.com/chen8840/p/14683827.html