html - 无法让我的网格元素拉伸(stretch)父 div

Question

我正在尝试使用 css 网格创建一个网站(第一次)。

这是我目前所拥有的:

问题出在红色区域，我希望按钮中的3个元素跨越红色区域的整个高度。这是我当前的 CSS:

#red{
    background-color: red;
    padding-right: 5px;
    height: 100%
    grid-area: 1/1/2/2;
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: 33% auto auto;
}

#upperelement{

    grid-area: 1/1/2/2;
    background-color: blue;
}

#upperelementselect{
    height:100%;
    width: 100%;
    font-size: 20px;
    border: none;
    border-radius: 10px;
    text-align: center;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color: #404040;
    color: white;
}

#middleelement{
    padding-top: 5px;
    grid-area: 2/1/4/2;
}

#middleelementselect{
    height:100%;
    width: 100%;
    font-size: 20px;
    border: none;
    border-radius: 10px;
    text-align: center;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color: #757575;
    color: white;
}

#lowerelement{
    padding-top: 5px;
    padding-bottom: 5px;
    grid-area: 1/3/2/4;
}

#lowerelementbutton{
    height:100%;
    width:100%;
    font-size: 20px;
    border: none;
    border-radius: 10px;
    text-align: center;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color: #404040;
    color: white;
}

这是我的 html 简而言之:

<div class="red">
<div id="upperelement"><select id="upperelementselect"></select></div>
<div id="middleelement"><select id="middleelementselect"></select></div>
<div id="lowerelement"><button id="lowerelementbutton"></button></div>
</div>

我做错了什么？我知道使用表格可能会容易得多，但这不是重点:)

Answer 1

正如我在评论中所说，这里有一些错误或不理想的选择，如果没有其他上下文，很难提供适当的解决方案。但是您可以通过以下方式或多或少地实现您的要求:

.grid {
  display: grid;
  grid-gap: 5px;
  grid-template-rows: repeat(3, 1fr);
  grid-template-columns: repeat(2, 1fr);
  background-color: red;
  color: white;
}

.controls-column {
  grid-column: 1;
}

.side-content {
  padding: 5px;
  grid-column: 2;
  grid-row: 1/4;
}

.control {
    height: 100%;
    width: 100%;
    font-size: 20px;
    border: none;
    border-radius: 10px;
    text-align: center;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    color: white;
}

.select-top {
  background-color: #404040;
}

.select-middle {
  background-color: #757575;
}

.button {
  background-color: #404040;
}

<div class="grid">
  <div class="controls-column">
    <select class="control select-top"></select>
  </div>
  
  <div class="controls-column">
    <select class="control select-middle"></select>
  </div>
  
  <div class="controls-column">
    <button class="control button">button</button>
  </div>
  
  <div class="side-content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quibusdam obcaecati quod distinctio est reprehenderit, sint incidunt culpa unde nobis consequatur ut temporibus, molestiae facilis. Cum veritatis delectus necessitatibus maiores?
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quibusdam obcaecati quod distinctio est reprehenderit, sint incidunt culpa unde nobis consequatur ut temporibus, molestiae facilis. Cum veritatis delectus necessitatibus maiores?
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto quibusdam obcaecati quod distinctio est reprehenderit, sint incidunt culpa unde nobis consequatur ut temporibus, molestiae facilis. Cum veritatis delectus necessitatibus maiores?
  </div>
</div>

除此之外，您绝对应该查看一些指南，例如 this和/或一些教程，因为您缺少的主要是对 CSS 网格布局原则和 sintaxe 的一些基本理解。希望这有助于您入门。