Question

我有一个父div或class = row和两个class = col-xs-6的子节点。我想在那之间有空间，但也有边界。所以我给每个人添加了一个子div。 col-xs-6类提供15px填充，所以我得到了我的空间。现在的问题是我希望它们的大小相同。

我添加了display：table-row到行
我在两个子列中添加了display：table-cell和float：none。它赋予divs相等的高度。

我的问题是包含内容的第二个子div小于第一个子div。因此，实心边界不会达到相同的高度。子div如何继承父级大小？

＆＃13;

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <div class="container">
  <div style="background:yellow; padding:10px; display:table-row" class="row">
    <div class="col-xs-6" style="display:table-cell; float:none; border:dashed">
      <div style="background:gray; border:solid">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
    
    <div style="display:table-cell; float:none; border:dashed" class="col-xs-6">
      <div style="background:lightblue; border:solid;">
      <p class="text-center">hello world</p>
      <p class="text-center">foobar !</p>
      </div>
    </div>
  </div>
  </div>

＆＃13;

代码：https://jsbin.com/babomib/edit?html,output

基本上，我希望蓝色背景的div与父级的高度相匹配。由于表格设置，父级将匹配最高的div。

编辑：根据建议的答案，我为父div添加了一个固定的高度然后说高度：为孩子继承。这似乎打破了响应的东西。文字渗透了div。

＆＃13;

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <div class="container">
  <div style="background:yellow; padding:10px; display:table-row; height:400px" class="row">
<div class="col-xs-6" style="display:table-cell; float:none; border:dashed; height:inherit">
  <div style="background:gray; border:solid; height:inherit">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

<div style="display:table-cell; float:none; border:dashed; height: inherit" class="col-xs-6">
  <div style="background:lightblue; border:solid; height:inherit">
  <p class="text-center">hello world</p>
  <p class="text-center">foobar !</p>
  </div>
</div>
  </div>
  </div>

＆＃13;

Answer 1

您必须将父div设置为使用

display: flex;

和孩子们一起使用

flex: 1;

这将自动为您提供相同的高度。

您可以找到有关Flexbox here的所有信息。我还创建了一个demo。

Answer 2

您必须明确设置父div容器的高度（即：100px），然后在内部元素上将高度设置为100%。

如果某个元素的父级没有明确的高度，则不能只在元素上设置height: 100%。如果在元素树的某个地方有一个具有明确高度的父级，并且所有子级的高度都设置为100%，则所有这些子级将与父级具有明确的高度完全相同身高宣言。

我不打算像你的示例那样深入探讨内联样式的不良做法，或者display: table-cell如何反模式（表格适用于数据，而不是布局）。我会链接你这个更新的小提琴，以便你可以看到你想要的一个有效的例子：

https://jsbin.com/gifaxo/3/edit?html,output

如果出现溢出，则#container的明确高度类似于200px。您也可以将其设置为100%，然后将其设置为父级（body element I think)也为100％，然后所有元素将占用页面的100％高度。溢出应默认为scroll所以你不会看到丑陋的溢出。

如何使用Bootstrap在中间和相同高度创建多个列

2 个答案: