Question

我有一个更大的div与子元素如bellow：

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

如果我有像这样的CSS：

.bigger
{
  heigh: 300px;
}

然后，它的所有孩子都获得100px的高度，即每个孩子都得到相同的高度。

即使孩子的数量增加或减少，我的意思是：

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

所有子div应该得到相同的高度，它应该更大 - 高/没有。儿童div。

是否存在任何CSS解决方案？我不想使用javaScript

Answer 1

如果你想在纯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 2

使用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 3

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

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

同样.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

对所有浏览器也是如此：）

Answer 4

允许元素占用相等的空间是传统上只有使用<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 5

要与孩子和父母一起工作，您需要使用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 6

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

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

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

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

适合容器内的任意数量的div？

6 个答案: