css – 将div对齐而不将其从流中移除

2023年4月30日 200次阅读

我需要将div对齐父div的底部.你可能只是告诉我使用position：absolute;和底部：0px;,但我无法从流中删除div.

我的HTML标记如下所示：

<div class=parent>
    <div class=child>
        Lorem ipsum dolor sit amet
    </div>
</div>

父div具有动态高度.有时,它显示所有内容(高度：自动;),但有时,它有一个固定的高度,小于孩子的高度.在这种情况下,我希望孩子到达顶部边缘的父母之外.孩子总有身高：自动;适合它的内容,我在设计时也不知道.

我试过的是使用position：absolute;和底部：0px;在孩子的div上,但这会使孩子脱离流动;因此,父div在高度为auto时将无法显示其内容：auto;活性.我也尝试过使用display：table-cell;和vertical-align：bottom;在父母身上,但这似乎使得它不可能给它一个小于内容的高度.

如果没有任何帮助,我仍然可以尝试JS解决方案,但我确信这可能以某种方式使用普通的CSS,即使我需要修改我的HTML并插入包装div或其他东西.

最佳答案 这个怎么样？

.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');
});

Demo

您可以使用容器以及Demo隐藏标题上方的溢出

正如Linek所提到的,不支持转换的浏览器只会显示内容.为了在不使用设定高度或将其从流量中取出的情况下到达它们,您必须过度估计元素的高度并使用负边距顶部. This demo应解决IE8中的问题

点赞