2

我一直在浏览互联网，尤其是 StackOverflow，以找到这个答案，但我一直没能找到。这里的好人帮助我解决了“一行的列高相等”——这对我的一些内容来说很棒。但是，显然，这是一个完全不同的游戏。

我有一个站点，基本的 CSS 布局，带有徽标和导航的顶部栏，下面的图像容器，然后是页脚。

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

我曾尝试使用具有各种属性的 Flexbox，但它并没有像我预期的那样工作。

这是CSS（片段）

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

    }

这是HTML（片段）

<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）具有相同的高度，并像现在一样继续堆叠在一起。

大小错误的 div

4

3 回答 3

2

我想你是在追求这样的事情。

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

于 2015-07-21T19:39:42.590 回答
1

Flexbox 无法做到这一点。只有 CSS Grid 可以，所以你的浏览器支持有点浅。

主要是grid-auto-rows: 1fr在 CSS 网格容器上设置并使其高度未定义。

Hre 是一支笔：https ://codepen.io/Hlsg/pen/XgjWMz

于 2017-06-13T22:45:40.190 回答
0

而不是使用%使用height: 480px或您想要的任何数量？

我不确定你想要这个有多具体，这只是猜测，如果你提供你所拥有的和你想要的的截图，我可以编辑我的答案

于 2015-07-21T19:17:05.710 回答