Question

我一直在寻找互联网，特别是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）都是相同的高度，并且继续像现在一样堆叠在彼此之上。

Mis-Sized Divs

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>

Answer 2

Flexbox无法实现这一目标。只有CSS Grid可以，所以你的浏览器支持有点浅。

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

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

Answer 3

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

我不确定你想要的具体程度如何，这只是推测，如果你提供你所拥有的屏幕截图与你想要的截图，我可以编辑我的答案

如何使CSS ROWS高度相等？ PURE CSS / HTML

3 个答案: