表格单元引导列的子节点不占空高

Question

我有3张不同的账户卡，每张卡都有不同的内容。我希望所有卡（位于col-md-4类中）占据列的整个高度。

我从[this] [1]线程中收集到，实现这一目的的一种方法是使用display：table。主要问题是我的列中有一个div，我需要占据列的整个高度。我将这些div设置为显示：内联块和高度为100％，但div似乎表现为高度设置为自动而不占用全高

这是我的HTML：

＆＃13;

＆＃13;

    .container {
    	display: table;
    }

    .row {
    	display: table-row;
    	height: 100%;
    }

    .col-md-4 {
    	display: table-cell;
    	float: none;
    	height: 100%;
    }

   

    .account {

		background: $overlay-color;
		text-align: center;
		display: inline-block;
		margin: 0;
		padding: 0;
		height: 100%;

    }

＆＃13;

 <div class="container">
            <div class="row">
                <div class="col-md-4">
                    <div class="account">
                        <h1 class="type">MINI ACCOUNT</h1>

                        <div class="details">
                            <h2 class="ad">A perfect account to start with!</h2>
                            <p class="detail">Spreads from 2.3 pips</p>
                            
                        </div>
                        
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="account">
                        <h1 class="type">STANDARD ACCOUNT</h1>

                        <div class="details">
                            <h2 class="ad">An ideal account for every investor!</h2>
                            <p class="detail">Spreads from 1.9 pips</p>
                            <p class="detail">Minimum deposit = $25 000</p>
                            
                        </div>
                        
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="account">
                        <h1 class="type">EXCLUSIVE ACCOUNT</h1>

                        <div class="details">
                            <h2 class="ad">An exclusive account for exclusive clients!</h2>
                            <p class="detail">Spreads from 0 pips</p>
                            <p class="detail">Minimum deposit = $50,000</p>
                            <p class="detail">Access to Daily Technical Analysis</p>
                            
                        </div>
                        
                    </div>
                </div>
            </div>
        </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试使用 flexbox

＆＃13;

＆＃13;

.container {
    display: table;
}
.row {
    display: flex;
}
.col-md-4 {
    float: none;
}
.account {
	background: rgba(0, 0, 0, 0.34);
	text-align: center;
	display: inline-block;
	margin: 0;
	padding: 0;
	height: 100%;
}

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="account">
        <h1 class="type">MINI ACCOUNT</h1>
        <div class="details">
          <h2 class="ad">A perfect account to start with!</h2>
          <p class="detail">Spreads from 2.3 pips</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="account">
        <h1 class="type">STANDARD ACCOUNT</h1>
        <div class="details">
          <h2 class="ad">An ideal account for every investor!</h2>
          <p class="detail">Spreads from 1.9 pips</p>
          <p class="detail">Minimum deposit = $25 000</p>
        </div>
      </div>
    </div>
    <div class="col-md-4">
      <div class="account">
        <h1 class="type">EXCLUSIVE ACCOUNT</h1>
        <div class="details">
          <h2 class="ad">An exclusive account for exclusive clients!</h2>
          <p class="detail">Spreads from 0 pips</p>
          <p class="detail">Minimum deposit = $50,000</p>
          <p class="detail">Access to Daily Technical Analysis</p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;