如何使所有水平子div适合父母？

Question

这是我的 HTML sn-p，

<div class=bigger>
    <div>A</div>
    <div>B</div>
    <div>C</div>
</div>

如果我有这样的 CSS：

.bigger
{
  height: 300px;
}

在 CSS 中有什么方法可以让所有子 div 的高度与父 div 的高度相同，即都应该有 300px 的高度？

Answer 1

使用 Flexbox 的解决方案：

.bigger {
  height: 400px;
  background: #eea;

  display: flex;
  flex-direction: column;
}

.bigger div {
  margin: 4px;
  border: 1px dotted green;
  flex: auto;   
}

演示：http://codepen.io/anon/pen/nAjLt （注意 Codepen 做了供应商前缀）

Answer 2

如果你想在纯 CSS 中实现这一点，你可以试试这个

DEMO

我已经为 4 个项目设置了它。您可以将其扩展到任意数量的项目。

/* one item */
.bigger > div:first-child:nth-last-child(1) {
    height: 300px;
}

/* two items */
.bigger > div:first-child:nth-last-child(2),
.bigger > div:first-child:nth-last-child(2) ~ div {
    height: 150px;
}

/* three items */
.bigger > div:first-child:nth-last-child(3),
.bigger > div:first-child:nth-last-child(3) ~ div {
    height: 100px;
}

/* four items */
.bigger > div:first-child:nth-last-child(4),
.bigger > div:first-child:nth-last-child(4) ~ div {
    height: 75px;
}

Answer 3

允许元素占用相等的空间是传统上只有使用<table>s 才能实现的。不过你可以use CSS to make your <div>s behave like <table>s instead:

HTML

<div class=bigger>
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <!-- add or remove any number of <div>s here -->
</div>

（相关）CSS

.bigger {
    display: table;
    height: 300px;
    width: 100%;
}

.bigger > div {
    display: table-row;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}

Answer 4

要与孩子和父母一起工作，您需要使用auto 和max

<div class="bigger">
 <div>A</div>
 <div>B</div>
 <div>C</div>
</div>

这里可以使用

.bigger {
  height: auto; // this will do the trick..
  overflow: none;
  min-height: 300px;
}

使用 max 和 min，只是为了确保每次孩子增加或减少时 height 保持不变，然后使用这个：

.bigger div {
  height: 100%; // note this..
}

在这里试试这个小提琴：http://jsfiddle.net/afzaal_ahmad_zeeshan/2bJfW/ 再添加一个 div 并检查它，

如果你想动态创建 div 高度，那么没有 CSS，你需要 JS 或者说 jQuery。因为您需要计算孩子的数量，然后更改他们的身高百分比，假设从 100 到 30（对于 3）或 22 对于（4）等等，因为文本不会不适合那个尺寸。

Answer 5

.bigger
{
  height: auto;
}
.bigger div
{ 
height:50px;
}

你应该提到每个内部div的高度，然后才能正常工作。

现在你在更大的 div 中添加另一个内部 div 元素，高度应该相同。

这里我提到了50px的高度，你给你想要的高度。

Answer 6

.bigger {
    width:100%;
    height:auto;
    border:1px solid red;
}
.bigger div {
    height:100px;
    width:100%;
    border:1px solid blue;
}

通过将height 设置为auto it will adjust to any no of divs，使用此css。

另外.bigger div 会将所有 div 设置为 100px 高度。

Live Demo

编辑：对于固定容器

.bigger {
    width:100%;
    height:300px;
    border:1px solid red;
    display:table;
}
.bigger div {
    display:table-row;
    height:auto;
    width:100%;
}

Live Demo2

所有浏览器都一样:)