将div对齐到底部而不将其从流中删除
抓住
我需要将div对准父div的底部。您可能只是告诉我使用position: absolute;和bottom: 0px;，但是我无法从流中删除div。
我的HTML标记如下所示：
<div class=parent>
<div class=child>
Lorem ipsum dolor sit amet
</div>
</div>
父div具有动态高度。有时，它的高度足以显示其所有内容（高度：自动；），但有时，它具有固定的高度，该高度小于孩子的身高。在这种情况下，我希望孩子在顶部边缘到达父母之外。孩子总是必须height: auto;适应其内容，在设计时我也不知道。
我试过的是在子div上使用position: absolute;和bottom: 0px;，但这将子项从流中删除；因此，父divheight: auto;处于活动状态时将无法显示其内容。我也尝试在父级上使用display: table-cell;and vertical-align: bottom;，但这似乎无法使其高度小于内容的高度。
如果没有帮助，我仍然可以尝试使用JS解决方案，但是我敢肯定，即使我需要修改HTML并插入包装div或其他内容，也必须以某种方式使用纯CSS。
扎克·索西耶
这个怎么样？
.parent {
margin-top:-16px;
background-color: gold;
height: 88px;
position:relative;
-webkit-transform:translateY(-100%);
transform:translateY(-100%);
transition:1s all;
z-index:-1;
}
.down {
-webkit-transform:translateY(0);
transform:translateY(0);
}
$(".header").click(function () {
$(".parent").toggleClass('down');
});
你可以通过使用一个容器，以及隐藏标题上方溢出演示
正如Linek所提到的，不支持转换的浏览器只会显示内容。为了在不使用设定高度或不将其从流程中移除的情况下达到它们，您必须高估元素的高度并使用负数margin-top。该演示应解决IE8中的问题
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
将Div中的按钮对齐到底部
- 2
如何将div中的sth对齐到底部？
- 3
将浮动div对齐到底部
- 4
无法将 div 居中对齐到底部
- 5
如何将 div bootstrap 网格中的文本对齐到底部？
- 6
将 ul 与固定 div 中的底部对齐
- 7
将div强制到底部
- 8
将div强制到底部
- 9
将表格水平对齐到底部中心
- 10
使用LinearLayout将按钮对齐到底部
- 11
在不更改HTML的情况下将当前浮动的div对齐到底部
- 12
将网格中的列推到底部，垂直对齐不起作用
- 13
将标题与div的底部对齐
- 14
仅使用CSS尝试使最右边的div对齐到底部
- 15
Div 底部在列中对齐
- 16
小程序-将文本对齐到底部中间
- 17
将列表项垂直对齐到底部
- 18
我无法将元素垂直对齐到底部
- 19
将 Bootstrap 4 导航栏链接对齐到底部
- 20
将文本移到div的底部以与图像对齐
- 21
将文本结尾对齐到div的底部
- 22
将文本居中对齐到div的底部
- 23
如何将图像与div的底部对齐？
- 24
将文本基线对齐到div的底部
- 25
将div对齐到Bootstrap行的底部
- 26
如何将图像与div的底部对齐？
- 27
将 div 对齐到父级的底部
- 28
如何将显示div滚动到底部
- 29
将 div 跳到底部而不滚动页面
我来说两句