行在 css-grid 中没有占用 100% 的高度

Question

我想创建一个具有Bootstrap 的navbar 和css-grid 布局的页面。

在顶层，我创建了一个css grid，其中包含 1 列和 2 行。我希望网格包含 2 行。第一行的高度应与引导程序导航栏的高度相同。第二行的高度应占据页面中所有剩余空间。

.css-grid-container-common-styles{
    height:100%;
    display: grid;
    grid-template-columns: 1fr; 
    grid-template-rows: auto auto; /* with height = 100%, I want that height for nav is calculated and assigned to row 1, remaining height is assigned to row 2*/
}

Bootstrap 的导航栏位于第一行，跨越所有列

.css-grid-item-nav-div{
    grid-column: 1 / -1;
    grid-row: 1 / 2;
    border: 3px solid black;
}

一个按钮位于第二行，但该行应占用所有剩余的可用空间。

.css-grid-item-login-div{
    grid-column: 1 / -1;
    grid-row: 2 / -1;
    border: 3px solid black;
}

问题 - 第二行的高度等于按钮的高度。如何让它占用所有剩余空间？

完整代码 - HTML/CSS

.body-common-styles {
  background: linear-gradient(45deg, #33b1f8 37%, #6e90f6 100%);
  /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
  color: white;
  font-family: Helvetica;
  line-height: 1;
}

.div-common-styles {
  background-color: #0F2148;
}

.button-common-styles-normal {
  /*background: radial-gradient(ellipse,#268ff4 5%,#4da3f8 95%); 	*/
  background-color: #4da3f8;
  border: none;
  color: white;
  border-radius: 8px;
  width: 100px;
  /* sets the width of the content area to 200 px */
  height: 40px;
  box-sizing: border-box;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.button-common-styles-normal:hover {
  background-color: #268ff4;
}

.center-horizontally-common-styles {
  display: block;
  margin: auto auto;
}

.centre-vertical-common-styles {
  position: fixed;
  left: 50%;
  /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
  top: 50%;
  /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
  transform: translate(-50%, -50%);
}

.centre-button-vertical-common-styles {
  position: absolute;
  left: 50%;
  /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
  top: 50%;
  /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
  transform: translate(-50%, -50%);
}

.debug-border-common-styles {
  border: 3px solid black;
  height: 200px;
  width: 400px;
}

.css-grid-container-common-styles {
  height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  /*one column for nav*/
  grid-template-rows: auto auto;
}

.css-grid-item-nav-div {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  border: 3px solid black;
}

.css-grid-item-login-div {
  grid-column: 1 / -1;
  grid-row: 2 / -1;
  border: 3px solid black;
}

<div class="css-grid-container-common-styles">
  <nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
    					<span class="navbar-toggler-icon"></span>
    					</button>
    <a class="navbar-brand" href="index.html">CodingJedi</a>
    <div class="collapse navbar-collapse justify-content-between" id="navbar1">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="widgets.html">About</a>
        </li>
      </ul>
    </div>
  </nav>
  <div>
    <div class="css-grid-item-login-div">
      <button type="button" class="button-common-styles-normal"> Click Me! </button>
    </div>
  </div>
</div>

Answer 1

您必须处理一些问题才能使其正常工作。

第一个问题在您的情况下可能不是问题，但在运行此 sn-p 时是一个问题。 height: 100% 仅在祖先元素也具有工作确定高度时才有效。对于全屏高度，您可以使用100vh。

第二个问题，auto auto 的行高不是那么聪明，它几乎可以平均划分空间。您可以将其替换为 auto 1fr。 fr 是一个新的单元，考虑到网格，1fr 将占用剩余的 1 个分数。

第三，这是您遇到的主要问题。您在css-grid-item-login-div 周围有边框，但网格区域是在其父级上定义的。在 Firefox 中，您可以使用 display:contents，但更好的解决方案是通过删除其父 div 来“解包”css-grid-item-login-div

  <div>
    <div class="css-grid-item-login-div">
      <button type="button" class="button-common-styles-normal"> Click Me! </button>
    </div>
  </div>

变成

<div class="css-grid-item-login-div">
  <button type="button" class="button-common-styles-normal"> Click Me! </button>
</div>

完整代码在sn-p中

body {
  margin: 0;
}

.body-common-styles {
  background: linear-gradient(45deg, #33b1f8 37%, #6e90f6 100%);
  /*syntax linear-gradient(direction, color1 limit, color2 limit)*/
  color: white;
  font-family: Helvetica;
  line-height: 1;
}

.div-common-styles {
  background-color: #0F2148;
}

.button-common-styles-normal {
  /*background: radial-gradient(ellipse,#268ff4 5%,#4da3f8 95%); 	*/
  background-color: #4da3f8;
  border: none;
  color: white;
  border-radius: 8px;
  width: 100px;
  /* sets the width of the content area to 200 px */
  height: 40px;
  box-sizing: border-box;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 10px;
}

.button-common-styles-normal:hover {
  background-color: #268ff4;
}

.center-horizontally-common-styles {
  display: block;
  margin: auto auto;
}

.centre-vertical-common-styles {
  position: fixed;
  left: 50%;
  /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
  top: 50%;
  /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
  transform: translate(-50%, -50%);
}

.centre-button-vertical-common-styles {
  position: absolute;
  left: 50%;
  /*creates a space equal to 50% from left creating effect of moving the element towards the center horizontally*/
  top: 50%;
  /* creates a space equal to 50% from top creating effect of moving the element towards the center vertically*/
  transform: translate(-50%, -50%);
}

.debug-border-common-styles {
  border: 3px solid black;
  height: 200px;
  width: 400px;
}

.css-grid-container-common-styles {
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr;
  /*one column for nav*/
  grid-template-rows: auto 1fr;
}

.css-grid-item-nav-div {
  grid-column: 1 / -1;
  grid-row: 1 / 2;
  border: 3px solid black;
}

.css-grid-item-login-div {
  grid-column: 1 / -1;
  grid-row: 2 / -1;
  border: 3px solid black;
}

<div class="css-grid-container-common-styles">
  <nav class="navbar navbar-expand-lg navbar-light bg-light css-grid-item-nav-div">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbar1" aria-controls="navbar1" aria-expanded="false" aria-label="Toggle navigation">
    					<span class="navbar-toggler-icon"></span>
    					</button>
    <a class="navbar-brand" href="index.html">CodingJedi</a>
    <div class="collapse navbar-collapse justify-content-between" id="navbar1">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="index.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="widgets.html">About</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="css-grid-item-login-div">
    <button type="button" class="button-common-styles-normal"> Click Me! </button>
  </div>
</div>