gpt4 book ai didi

css - 如何在全高 div 中垂直对齐空 div?

转载 作者:搜寻专家 更新时间:2023-10-31 08:47:04 26 4
gpt4 key购买 nike

大图:我正在尝试制作一个由离散单元组成的条形图。每个单元都是一个 div。条形将从下向上增长。

详细信息:我有一个包含所有单元 div 或 block 的容器 div。容器有一个垂直对齐的底部来做到这一点。

它应该是这样的:https://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%。这使得这一切发生:https://jsfiddle.net/7n7ZH/1/

我更愿意找到一种使用 CSS 来完成此操作的方法,最好不要太 hacky。我已经在我的元素中使用 jQuery 来处理行为,所以我可以将其用作最后的手段。

编辑:此外,所有父标签的高度也为 100%,包括 HTML 和正文。

最佳答案

制作#container的容器元素display:table像这样:https://jsfiddle.net/7n7ZH/2/

html, body { height: 100%; margin:0; }

body { display:table; }

#container {
height: 100%;
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;
}
<div id="container">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>

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

所以当你说 display:table-cell; height:100% ,这是创建的伪元素的 100%,即 display:table .但是该伪元素仅与其内容一样高,并且 CSS 中没有办法说“让伪元素的高度为其父元素高度的 100%”。

但是有可能有一个真正的元素是display:table并将其高度设置为 100%,在这种情况下浏览器将使用它而不创建 display:table伪元素。

关于css - 如何在全高 div 中垂直对齐空 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16637688/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com