css – 如何在一个完整的高度div中垂直对齐一个空div？

2019年8月4日 278次阅读

大图：我正在尝试制作由离散单位组成的条形图.每个单位都是一个div.酒吧将从底部到顶部生长.

细节：我有一个容器div,它包含所有单元div或块.容器具有垂直对齐的底部以实现此目的.

它应该是这样的：http://jsfiddle.net/hpf4h/1/

<div id="container">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

#container {
    height: 100px;
    width: 10px;
    padding: 1px;
    background-color: #00f;

    display: table-cell;
    vertical-align: bottom;
}

.block {
    height: 10px;
    width: 10px;
    margin: 1px 0px 1px 0px;
    background-color: #0f0;
}

这很好,但我需要容器的高度为100％.这使得这种情况发生了：http://jsfiddle.net/7n7ZH/1/

我宁愿找到一种方法来使用CSS,最好不要太hacky.我已经在我的项目中使用jQuery,所以我可以将它作为最后的手段.

编辑：此外,所有父标签的高度也为100％,包括html和body.

最佳答案 make#container的容器元素显示：表格如下：
http://jsfiddle.net/7n7ZH/2/

当您使用display：table-cell时,浏览器会查找正在显示的祖先元素：table-row,display：table-row-group和display：table.如果它找不到它们,它会创建伪元素来代替它们.这就是这里发生的事情.

所以当你说display：table-cell; height：100％,这是显示的创建的伪元素的100％：table.但是那个伪元素只有它的内容一样高,并且在CSS中没有办法说“使伪元素的高度高于其父级的高度100％”.

但是有一个真实元素可以显示：table并将其高度设置为100％,在这种情况下,浏览器将使用它而不创建display：table伪元素.

点赞