使Div的高度不能正常工作

我试图让两个div的容器div内有相同的高度。我正在使用引导程序的网格。正如您在下面的图像示例中看到的那样。输出结果显示类page-member-detail-info（绿色边框div）没有占据其父节点高度的100％。使Div的高度不能正常工作

注意：如果我使用类page-member-detail-container（红色边框div）的div的高度为250px的固定值。然后结果如预期。 page-member-detail-info（绿色边框div）将是100％的高度。

HTML：

<div class="container"> 
    <div class="row"> 
     <div class="col-sm-12 page-member-detail-container"> 
      <div class="col-sm-3 page-member-detail-image"> 
       <img src="http://example.com/image.jpg" alt="My Image"> 
      </div> 
      <div class="col-sm-9 page-member-detail-info"> 
       DETAILS 
      </div> 
     </div> 
    </div> 
</div>

CSS：

.page-member-detail-container { 
    border: 3px solid #FF0000; // red 
    padding: 0; 
} 

.page-member-detail-image { 
    border: 3px solid #0000ff; // blue 
    padding-left: 0; 
} 

.page-member-detail-image>img { 
    width: 100%; 
} 

.page-member-detail-info { 
    border: 3px solid #009b00; // green 
    height: 100%; 
}

来源

2017-01-10 TKEz

如果Flexbox不适合你，你应该尝试插件[matchHeights]（https://github.com/liabru/jquery-match-height）。它解决了你面临的确切问题，你不需要编写任何JavaScript。无论内容（其中“group_name”是您指定的字符串）的内容，只需在所有您希望匹配高度的元素（引导程序col-'在您的案例中）中包含属性'data-mh =“group_name”'。我用这个插件获得了很多成功 – zgood

为Flexbox的另一种情况！只需将display：flex添加到您的容器。

.page-member-detail-container { 
 
    border: 3px solid #FF0000; 
 
    padding: 0; 
 
    display: flex; 
 
} 
 

 
.page-member-detail-image { 
 
    border: 3px solid #0000ff; 
 
    padding-left: 0; 
 
} 
 

 
.page-member-detail-image>img { 
 
    width: 100%; 
 
} 
 

 
.page-member-detail-info { 
 
    border: 3px solid #009b00; 
 
}

<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-sm-12 page-member-detail-container"> 
 
      <div class="col-sm-3 page-member-detail-image"> 
 
       <img src="http://example.com/image.jpg" alt="My Image"> 
 
      </div> 
 
      <div class="col-sm-9 page-member-detail-info"> 
 
       DETAILS 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

来源

2017-01-10 20:19:21

如果支持旧的浏览器是一个问题，那么你可以设置。 page-member-detail-container显示：table和child DIVs显示：table-cell。这会给你你正在寻找的平等高度。此外，它还打开了垂直对齐属性。

来源

2017-01-10 20:34:57

使Div的高度不能正常工作

回答

相关问题