时间戳

首页 > 解决方案 > CSS网格布局 - 行的高度永远不会起作用

html - CSS网格布局 - 行的高度永远不会起作用

问题描述

我想在我的 css 中为我的 react 应用程序使用百分比，但这会让人头疼。宽度 % 一直工作得很好，但高度 % 总是一个问题。似乎我必须以像素为单位指定一个高度才能使其工作，除非该元素包含子元素。

我在这里错过了一些基本的东西吗？如果没有子元素，div 是否不会将自身设置为剩余高度的 100%。尽管我将 align-items 属性设置为拉伸，但以下代码不起作用。

.search-container{
    display: grid;
    grid-template-columns: auto 900px 300px auto;
    grid-template-rows: 30% auto auto;
    grid-gap: 20px;
}

.promo-container {
    background-color:blue;
    grid-column-start: 2;
    grid-column-end: 3;
    align-items: stretch;
}

.form-container {
    background-color:blue;
    grid-column-start: 3;
    grid-column-end: 4;
    align-items: stretch;
}

.results-header {
    background-color:rgb(255, 94, 0);
    grid-column-start: 2;
    grid-column-end: 4;
    height: 90px;
}

.refine-search {
    background-color:blue;
    grid-column-start: 2;
    grid-column-end: 3;
    height: 100%;
}

.results-container{
    background-color:rgb(0, 255, 42);
    grid-column-start: 2;
    grid-column-end: 3;
}
<div className="search-container">
  <div className="promo-container">
  </div>              
  <div className="form-container">
  </div>
  <div className="results-header">
  </div>
  <div className="refine-search">
  </div>
  <div className="results-container">
  </div>
</div>

标签： htmlcsscss-grid

解决方案

您需要设置父元素的高度。

html, body, div {
    height: 100%;
    width: 100%;
}

推荐阅读