html - 如何让CSS行具有相同的高度？

Question

我有一个网站，基本的 CSS 布局，带有 Logo 和导航的顶部栏，其下方的图像容器，然后是页脚内容。

在“内容区域”中，我设置了两个 div 类，oSection 和 eSection(奇数和偶数，聪明，我知道)。我这样做是为了让每个 div 都可以有交替的背景颜色，以便在视觉上轻松地分解内容包。然而，这些行的高度并不相等。它们似乎只扩展到 div 中包含的内容的高度。理想情况下，我希望每个 div 都具有相同的高度，无论 div 中有多少内容(我猜它必须与最大的 div 一样高(相同的高度))，但我也想让确保它们都在自己的单独行上，所以我真正需要的是彼此堆叠的等高div

我尝试过使用具有各种属性的 Flexbox，但它没有按我的预期工作。

.oSection {
    /*margin: 2% 0; */
    background-color: #E6E6E6;
    height: 50%;
    padding-left: .5%;
    padding-top: .5%;
    padding-bottom: .5%;
}
.eSection {
   /* margin: 2% 0; */
    background-color: #FFFFFF;
    height: 50%;
    padding-left: .5%;
    padding-top: .5%;
    padding-bottom: .5%;
}

<div class="oSection">
    <b>Web Design</b><br>
     Yada yada yada
</div>
<div class="eSection">
    <b>Microsoft SharePoint</b><br>
    Yada yada yada<br>
</div>
<div class="oSection">
    <b>Microsoft Dynamics CRM</b><br>
    yad yada yada
</div>
<div class="eSection">
    <b>Technology Consulting</b><br>
    yada yada yada
</div>

这是显示 Div 大小错误的屏幕截图。我希望每个带有文本的水平 div(不是页眉或页脚，只是中间的 div)具有相同的高度，并继续像现在一样堆叠在一起。

Answer 1

我认为您正在追求类似的东西。

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.oSection,
.eSection {
  flex: 1;
}
.oSection {
  background-color: #E6E6E6;
}
.eSection {
  background-color: #FFFFFF;
}

<div class="container">
  <div class="oSection"> <b>Web Design</b>

    <br/>Yada yada yada</div>
  <div class="eSection"> <b>Microsoft SharePoint</b>
    <br/>Yada yada yada
    <br/>
    <br/>
    <br/>Yada yada yada
    <br/>
  </div>
  <div class="oSection"> <b>Microsoft Dynamics CRM</b>

    <br/>yad yada yada</div>
  <div class="eSection"> <b>Technology Consulting</b>

    <br/>yada yada yada</div>
</div>