Question

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

详细信息：我有一个容器div，它包含所有单元div或块。容器有一个垂直对齐的底部来做这件事。

<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。

Answer 1

同时应用display:table-cell;和height很少会提供您期望的结果。我发现您正在尝试使用vertical-align这可能是您添加table-cell的原因。请尝试使用css定位：

从容器中删除display:table-cell;和vertical-align。

将height:100%;添加到body和html元素，以便您的容器有增长空间。

将容器设置为position:relative;，这将使其成为所有已定位子项的原点，而不是文档根（正文标记）。这样您就可以移动容器而不会搞砸孩子的位置。

在你的块周围添加一个包装器（你可以使用ul，li而不是div）。

将块容器定位为position:absolute; bottom:0;

这是代码......

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

    position:relative;
}
.blockContainer
{
    position:absolute;
    bottom:0px;
}
.block {
    height: 10px;
    width: 10px;
    margin: 1px 0px 1px 0px;
    background-color: #0f0;
}

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

    position:relative;
}
.blockContainer
{
    position:absolute;
    bottom:0px;
}
.block {
    height: 10px;
    width: 10px;
    margin: 1px 0px 1px 0px;
    background-color: #0f0;
}

body { height:100% }
html { height: 100%}

......这就是小提琴......

http://jsfiddle.net/kPEnL/1/

Answer 2

像这样制作＃容器的容器元素display:table：http://jsfiddle.net/7n7ZH/2/

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

因此，当您说display:table-cell; height:100%时，创建的伪元素的100％是display:table。但是这个伪元素只有它的内容一样高，并且在CSS中没有办法说'＃34;使伪元素的高度达到它的100％的高度。父母代替＆＃34;。

但是可以将一个真实元素设为display:table并将其高度设置为100％，在这种情况下，浏览器将使用该元素，而不是创建display:table伪元素。

Answer 3

我无法以您开始的方式提供帮助，但是考虑到尝试制作垂直进度条的原始大图，这是使用progressbar in Twitter Bootstrap的替代方法。在其现有形式中，它不执行垂直进度条，但this modification确实如此。

我最初建议使用堆叠条，但这不适用于垂直实现。相反，我有一个使用CSS渐变来绘制块的解决方案，但仍然使用正常的引导进度条。

.progress.discrete {
    background-image: linear-gradient(0deg, 
        black 0%, green 5%, green 95%, black 100%);
    background-size: 100% 10%;
    background-repeat: repeat-y;
}

/* Bar is used to cover up the blocks, so make it look like a background */
.progress.discrete .bar {
    background-image: linear-gradient(to right, #f5f5f5, #f9f9f9);
}

我认为你希望你的块是条形高度的百分比而不是绝对大小 - 这意味着我不能将渐变应用到条形。相反，它可以应用于背景，并且用于覆盖它的条（即，将条的宽度设置为100-progress％）。我还提供了一个使用固定块大小的示例，如果这是你想要的那样。

http://jsfiddle.net/BHTXZ/3/

它需要一点点整理，但这样做。

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

3 个答案: