为什么我的 div 显示网格的内部项目的高度不起作用？

Question

我正在尝试为容器内的项目提供 30% 和 70% 的高度 div，显示网格的高度为 100%，但内部项目的高度不尊重给定的百分比。我已经阅读但即使我将容器的高度设置为 100%，内部项目仍然不匹配。这是我的代码：

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
  }
  div {
    display: grid;
  }
  body {
    background: radial-gradient(at 60% 10%, #22242f 0, #161721 100%);
    color: #fff;
    font-family: Montserrat, sans-serif;
  }

  .widget-container {
      width: 50vw;
      height: 60vh;
      background: rgba(22,23,33,.75);
      border: 1px solid rgba(96,125,139,.25);
      border-radius: 1rem;
      box-shadow: 2px 2px 10px 0 rgb(22 23 33 / 35%);
      padding: 2rem 2rem;
  }
  .widget-sub-container {
    width: 100%;
    display: grid;
    border: dotted 3px green;
    height: 100%;
  }
  .pre-sale-top-row {
    width: 100%;
    border: dotted 2px blue;
    justify-items: center;
    height: 30%;
  }
  .pre-sale-bottom-row{
    border: dotted 2px blue;
    height: 70%;
  }

<!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" />
    <link rel="stylesheet" href="/../../css/presale.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
    <title>Document</title>
</head>
<body>
    <div class="widget-container">
        <div class="widget-sub-container">

            <div class="pre-sale-top-row">
                <h1>Pre-Sale</h1>
                <h2>countdown</h2>
                <h3>amount</h3>
            </div>

            <div class="pre-sale-bottom-row">
                <div></div>
            </div>
        </div>
    </div>
</body>
</html>

Answer 1

使用display: table-cell;

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

div {
    display: grid;
}

body {
    background: radial-gradient(at 60% 10%, #22242f 0, #161721 100%);
    color: #fff;
    font-family: Montserrat, sans-serif;
}

.widget-container {
    width: 50vw;
    height: 60vh;
    background: rgba(22,23,33,.75);
    border: 1px solid rgba(96,125,139,.25);
    border-radius: 1rem;
    box-shadow: 2px 2px 10px 0 rgb(22 23 33 / 35%);
    padding: 2rem 2rem;
}

.widget-sub-container {
    width: 100%;
    display: grid;
    border: dotted 3px green;
    height: 100%;
    display: table-cell;
}

.pre-sale-top-row {
    width: 100%;
    border: dotted 2px blue;
    justify-items: center;
    height: 30%;
}

.pre-sale-bottom-row{
    border: dotted 2px blue;
    height: 70%;
}

<!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" />
    <link rel="stylesheet" href="/../../css/presale.css" />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
    <link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
    <title>Document</title>
</head>
<body>
    <div class="widget-container">
        <div class="widget-sub-container">

            <div class="pre-sale-top-row">
                <h1>Pre-Sale</h1>
                <h2>countdown</h2>
                <h3>amount</h3>
            </div>

            <div class="pre-sale-bottom-row">
                <div></div>
            </div>
        </div>
    </div>
</body>
</html>

为什么我的 div 显示网格的内部项目的高度不起作用？

Why the height of the internal items of my div display grid is not working?

html

css

css-grid