Question

我有简单的3列布局和bootstrap。里面的每一列都有一个面板。我的目标是每个面板的父级高度为100％，所有列的高度相同（使用display: flex求解）。我尝试使用显示表和相对/绝对定位，但没有想出任何结果。我想避免固定值，例如身高：300px等。

谢谢！

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
/* Doesn't work */
/*
    .col-sm-4 {
        position: relative;
    }

    .panel-default {
        height: 100%;
        position: absolute;
    }
*/

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row row-eq-height">
    <div class="col-sm-4" style="background: red">
      <div class="panel panel-default">
        <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique gravida ligula. Aliquam erat volutpat. Fusce quam erat, porttitor ac ante sed, tempus fringilla nisl. Phasellus sit amet orci volutpat, hendrerit metus vitae, dapibus nunc.
          Phasellus eros mauris, iaculis quis massa vel, dictum sagittis mauris. Donec egestas sem venenatis vehicula facilisis. Mauris in ultrices augue. Etiam eros libero, malesuada nec luctus quis, aliquam nec massa. Fusce vitae hendrerit nibh, eget
          hendrerit mauris. Aliquam quis sem ipsum. Phasellus aliquet rhoncus tellus ac imperdiet. Sed nec lacus at erat elementum efficitur vel in magna. Vestibulum ac enim id ligula iaculis ultricies at facilisis lorem. Nullam lobortis ultrices felis</div>
      </div>
    </div>
    <div class="col-sm-4" style="background: green">
      <div class="panel panel-default">
        <div class="panel-body">Col 2</div>
      </div>
    </div>
    <div class="col-sm-4" style="background: blue">
      <div class="panel panel-default">
        <div class="panel-body">Nullam nec ex metus. Curabitur mollis sem vitae augue ultrices ornare. Phasellus efficitur viverra turpis, nec scelerisque purus rutrum vel. Ut pellentesque congue tincidunt. Nulla et nulla velit. Quisque pellentesque mi ac metus faucibus pretium.
          Duis sit amet vestibulum dolor.
          </div>
        </div>
      </div>
    </div>
  </div>

Answer 1

这可以解决问题并避免使用固定值，例如height: 300px。

.row-eq-height, .row-eq-height > div[class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    flex:1 1 auto;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<div class="row row-eq-height">
<div class="col-sm-4" style="background: red">
  <div class="panel panel-default">
	<div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi tristique gravida ligula. Aliquam erat volutpat. Fusce quam erat, porttitor ac ante sed, tempus fringilla nisl. Phasellus sit amet orci volutpat, hendrerit metus vitae, dapibus nunc.
	  Phasellus eros mauris, iaculis quis massa vel, dictum sagittis mauris. Donec egestas sem venenatis vehicula facilisis. Mauris in ultrices augue. Etiam eros libero, malesuada nec luctus quis, aliquam nec massa. Fusce vitae hendrerit nibh, eget
	  hendrerit mauris. Aliquam quis sem ipsum. Phasellus aliquet rhoncus tellus ac imperdiet. Sed nec lacus at erat elementum efficitur vel in magna. Vestibulum ac enim id ligula iaculis ultricies at facilisis lorem. Nullam lobortis ultrices felis</div>
  </div>
</div>
<div class="col-sm-4" style="background: green">
  <div class="panel panel-default">
	<div class="panel-body">Col 2</div>
  </div>
</div>
<div class="col-sm-4" style="background: blue">
  <div class="panel panel-default">
	<div class="panel-body">Nullam nec ex metus. Curabitur mollis sem vitae augue ultrices ornare. Phasellus efficitur viverra turpis, nec scelerisque purus rutrum vel. Ut pellentesque congue tincidunt. Nulla et nulla velit. Quisque pellentesque mi ac metus faucibus pretium.
	  Duis sit amet vestibulum dolor.
	  </div>
	</div>
  </div>
</div>
</div>

Fiddle

附注：Flex限制浏览器支持，特别是在移动设备上。

Bootstrap 3面板内部100％高度

1 个答案: