使用 flex 使具有不同行数的列具有相同的高度答案

【问题标题】：Use flex to get columns that have different amounts of rows to have the same height使用 flex 使具有不同行数的列具有相同的高度
【发布时间】：2016-08-03 09:06:16
【问题描述】：

我正在尝试使用引导程序获得这种视觉布局：

我遇到了几个问题。无论内容如何，所有部分都需要有边框并且高度必须相同。我应用了 flex 来达到相同的高度，但这会导致左列中的两个 div 彼此相邻。 Flex-direction: column 不起作用，clear: both 或 float: none 也不起作用。我也尝试使用 z-index 没有成功。有没有办法在不使用 JavaScript/jQuery 的情况下做到这一点？这需要完整查看才能正确查看问题。

.section {
  border: solid;
  border-width: .115em;
  border-color: #d4d2d0;
  padding-left: 0.938em;
  margin-top: 0.3em;
}
.flex {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
/*************left column*****************/

#lcolumn {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0 0.15em 0 0;
}
#specialties {
  padding-bottom: 3.5%;
}
hr {
  height: .05em;
  width: 50%;
  margin-left: -1em;
  background-color: #d4d2d0;
}
.specialties {
  width: 30%;
}
/*********************** right column************/

#rcolumn {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  padding: 0 0 0 0.15em;
}
#right-child {
  height: 100%;
  width: 100%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <link href="https://fonts.googleapis.com/css?family=PT+Sans" rel="stylesheet" type="text/css">
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

</head>

<body>
  <div class="container">
    <div class="row flex">
      <div id="lcolumn" class="col-xs-12 col-md-12 col-lg-6">
        <div class="section">

          <p>Bio here. All about me. Content, content, content, content, content, content.</p>
          <p>Paragraph 2. All about me. Content, content, content, content, content, content.</p>
        </div>
        <!--end Hello/bio-->

        <div class="section" id="specialties">
          <h3 class="text-uppercase ">My Specialties</h3>
          <hr>
          <p>Content, content, content, content, content, content.</p>

        </div>
        <!--end my specialties-->
      </div>
      <!---------------------------Right Column--------------------------->
      <div id="rcolumn" class="col-xs-12 col-md-6">
        <div class="section" id="right-child">
          <div>
            <h3 class="text-uppercase ">Education</h3>
            <hr>
            <ul>
              <li>
                <b>Full Stack Web Development / 2013</b>
                <br>
                <span class="text-uppercase">Palm Beach </span> 
              </li>
              <br>
              <li>
                <b>Master of Science |  / 2013</b>
                <br>
                <span class="text-uppercase"> College /  , New York</span> 
              </li>
              <br>
              <li>
                <b>Bachelor of Arts | music / 2007</b>
                <br>
                <span class="text-uppercase">Western </span> 
              </li>
            </ul>
          </div>
          <!--end education-->

          <div>
            <h3 class="text-uppercase ">Languages and Skills</h3>
            <hr>
            <ul>
              <li><span>HTML</span>
              </li>
              <li><span>CSS</span>
              </li>
              <li><span>Bootstrap</span>
              </li>
              <li><span>Materialize</span>
              </li>
              <li><span>JavaScript</span>
              </li>
              <li><span>JQuery</span>
              </li>
              <li><span>AngularJS</span>
              </li>
              <li><span>PHP</span>
              </li>
              <li><span>MySQL</span>
              </li>
              <li><span>WordPress</span>
              </li>
              <li><span>Photoshop</span>
              </li>
            </ul>
          </div>
          <!--end languages-->
        </div>
      </div>
      <!--end education & languages-->
    </div>
    <!--end .row--->
  </div>
  <!--end .container-->

</body>

</html>

【问题讨论】：

标签： html css twitter-bootstrap-3 flexbox multiple-columns

【解决方案1】：

这里是解决方案。检查下面的代码：

.section {
  border: solid;
  border-width: .115em;
  border-color: #d4d2d0;
  padding-left: 0.938em;
  margin-top: 0.3em;
}
.flex {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
/*************left column*****************/

#lcolumn {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0 0.15em 0 0;
}
#lcolumn > .section:first-child {
  -webkit-box-flex: 0;
  -webkit-flex: none;
  -ms-flex: none;
  flex: none;
}
#specialties {
  padding-bottom: 3.5%;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
hr {
  height: .05em;
  width: 50%;
  margin-left: -1em;
  background-color: #d4d2d0;
}
.specialties {
  width: 30%;
}
/*********************** right column************/

#rcolumn {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  padding: 0 0 0 0.15em;
}
#right-child {
  height: 100%;
  width: 100%;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="row flex">
    <div id="lcolumn" class="col-xs-12 col-md-12 col-lg-6">
      <div class="section">

        <p>Bio here. All about me. Content, content, content, content, content, content.</p>
        <p>Paragraph 2. All about me. Content, content, content, content, content, content.</p>
      </div>
      <!--end Hello/bio-->

      <div class="section" id="specialties">
        <h3 class="text-uppercase ">My Specialties</h3>
        <hr>
        <p>Content, content, content, content, content, content.</p>

      </div>
      <!--end my specialties-->
    </div>
    <!---------------------------Right Column--------------------------->
    <div id="rcolumn" class="col-xs-12 col-md-6">
      <div class="section" id="right-child">
        <div>
          <h3 class="text-uppercase ">Education</h3>
          <hr>
          <ul>
            <li>
              <b>Full Stack Web Development / 2013</b>
              <br>
              <span class="text-uppercase">Palm Beach </span>
            </li>
            <br>
            <li>
              <b>Master of Science |  / 2013</b>
              <br>
              <span class="text-uppercase"> College /  , New York</span>
            </li>
            <br>
            <li>
              <b>Bachelor of Arts | music / 2007</b>
              <br>
              <span class="text-uppercase">Western </span>
            </li>
          </ul>
        </div>
        <!--end education-->

        <div>
          <h3 class="text-uppercase ">Languages and Skills</h3>
          <hr>
          <ul>
            <li><span>HTML</span>
            </li>
            <li><span>CSS</span>
            </li>
            <li><span>Bootstrap</span>
            </li>
            <li><span>Materialize</span>
            </li>
            <li><span>JavaScript</span>
            </li>
            <li><span>JQuery</span>
            </li>
            <li><span>AngularJS</span>
            </li>
            <li><span>PHP</span>
            </li>
            <li><span>MySQL</span>
            </li>
            <li><span>WordPress</span>
            </li>
            <li><span>Photoshop</span>
            </li>
          </ul>
        </div>
        <!--end languages-->
      </div>
    </div>
    <!--end education & languages-->
  </div>
  <!--end .row--->
</div>
<!--end .container-->

【讨论】：

谢谢。这有效并保持了响应性。我确实必须删除 #rcolumn 上的 height: 100% 。

【解决方案2】：

你需要嵌套弹性框。

左列需要为flex-direction:column，每个内部div 需要flex:1 以将div 扩展至最大尺寸。

Codepen Demo

.section {
  border: solid;
  border-width: .115em;
  border-color: #d4d2d0;
  padding-left: 0.938em;
  margin-top: 0.3em;
  flex: 1;
}
.flex {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
/*************left column*****************/

#lcolumn {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 0.15em 0 0;
}
#specialties {
  padding-bottom: 3.5%;
}
hr {
  height: .05em;
  width: 50%;
  margin-left: -1em;
  background-color: #d4d2d0;
}
.specialties {
  width: 30%;
}
/*********************** right column************/

#rcolumn {
  display: flex;
  fleX: 1;
  padding: 0 0 0 0.15em;
}
#right-child {
  height: 100%;
  width: 100%;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row flex">

    <div id="lcolumn" class="col-xs-12 col-md-12 col-lg-6">
      <div class="section">

        <p>Bio here. All about me. Content, content, content, content, content, content.</p>
        <p>Paragraph 2. All about me. Content, content, content, content, content, content.</p>
      </div>
      <!--end Hello/bio-->

      <div class="section" id="specialties">
        <h3 class="text-uppercase ">My Specialties</h3>
        <hr>
        <p>Content, content, content, content, content, content.</p>

      </div>
      <!--end my specialties-->
    </div>
    <!---------------------------Right Column--------------------------->
    <div id="rcolumn" class="col-xs-12 col-md-6">
      <div class="section" id="right-child">
        <div>
          <h3 class="text-uppercase ">Education</h3>
          <hr>
          <ul>
            <li>
              <b>Full Stack Web Development / 2013</b>
              <br>
              <span class="text-uppercase">Palm Beach </span> 
            </li>
            <br>
            <li>
              <b>Master of Science |  / 2013</b>
              <br>
              <span class="text-uppercase"> College /  , New York</span> 
            </li>
            <br>
            <li>
              <b>Bachelor of Arts | music / 2007</b>
              <br>
              <span class="text-uppercase">Western </span> 
            </li>
          </ul>
        </div>
        <!--end education-->

        <div>
          <h3 class="text-uppercase ">Languages and Skills</h3>
          <hr>
          <ul>
            <li><span>HTML</span>
            </li>
            <li><span>CSS</span>
            </li>
            <li><span>Bootstrap</span>
            </li>
            <li><span>Materialize</span>
            </li>
            <li><span>JavaScript</span>
            </li>
            <li><span>JQuery</span>
            </li>
            <li><span>AngularJS</span>
            </li>
            <li><span>PHP</span>
            </li>
            <li><span>MySQL</span>
            </li>
            <li><span>WordPress</span>
            </li>
            <li><span>Photoshop</span>
            </li>
          </ul>
        </div>
        <!--end languages-->
      </div>
    </div>
    <!--end education & languages-->
  </div>
  <!--end .row--->
</div>
<!--end .container-->

【讨论】：

当我删除“高度：100%”和“宽度：100%”#right-child.唯一的问题是它破坏了响应能力并且没有将“#rcolumn”包装到引导“col-xs-12”。另外，我想提醒任何研究这个问题的人，当我之前使用 'flex-direction: column' 时，我已将 'order:#' 应用于嵌套的 div。

【解决方案3】：

在纯 css 中无法解决这个问题后，我编写了一个 jQuery 来完成同样的事情。我现在将它用作后备，因为并非所有浏览器都支持 Flex。我在这里为任何感兴趣的人发帖。

//get heights 

var lHeight = $('#hello').outerHeight(true) + $('#specialties').outerHeight(true);

var rHeight = $('#right-child').outerHeight(true);

var tallest = Math.max(lHeight, rHeight);

//make smaller column height of tallest

if (rHeight < tallest) {
    $('#right-child').css('height', tallest - 4);

} else {
    $('#specialties').css('height', tallest - $('#hello').outerHeight(true) - 4);
}

【讨论】：