在css-grid

Question

我想创建一个包含Bootstrap的{​​{1}}和navbar布局的网页。

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

css-grid

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

css grid

按钮进入第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*/
}

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

完整代码 - HTML / CSS

.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;
}

Answer 1

为了解决这个问题，您必须处理一些问题。

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

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

第三，这是您遇到的主要问题。您的边界在css-grid-item-login-div左右，但网格区域在其父级上定义。在Firefox中你可以使用display:contents，但更好的解决方案是＆＃34;解包＆＃34; css-grid-item-login-div删除其父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>

完整代码位于代码段

中

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;