css-将div定位到包含div的底部

118

如何将div定位到包含div的底部？

<style>
.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}
.inside {
    position: absolute;
    bottom: 2px;
}
</style>
<div class="outside">
    <div class="inside">inside</div>
</div>

此代码将文本“放入”置于页面底部。

css position

— 纳吉·索尔特·洪
source

.outside需求position: relative;

— 势在必行

是相对的，是的，然后不幸的是，它不知道容纳child-div内容需要多大，因此，除非是静态值，否则回到原始问题。如何将一个div放置在另一个div的底部（暗示：“不破坏所有内容”）。

— JosephK

Answers:

136

.outside {
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

需要是

.outside {
    position: relative;
    width: 200px;
    height: 200px;
    background-color: #EEE; /*to make it visible*/
}

绝对定位会在DOM中寻找最接近的相对定位的父对象，如果未定义，它将使用主体。

— 卡尔
source

谢谢。你能解释为什么吗？

— nagy.zsolt.hun 2013年

absolute搜索最近的relative父母。默认情况下body是的document。所以，如果没有父DOM对象（.outside）具有作为财产relative你.inside会去到body标签的底部。

“ 绝对定位会在DOM中寻找相对定位最接近的父对象，如果未定义，它将使用主体。 ”您为我做了很多解释！现在我真的开始了解CSS。谢谢！

— 西蒙·佛斯伯格

绝对实际上搜索最近的非默认（=静态）定位的祖先，该祖先通常是相对定位的。它也不必是直接父母，但可以是例如祖父母。

— mzwaal 2015年

这取决于恒定的高度，这非常差。字体，字体大小，填充，边距和上帝的简单更改就知道需要进行什么实验才能猜测出新高度。

— 安徒生

分配position:relative到.outside，然后position:absolute; bottom:0;到你.inside。

像这样：

.outside {
    position:relative;
}
.inside {
    position: absolute;
    bottom: 0;
}

— 格里芬
source

这可能是页脚发粘的基础，不是吗？

— cade galt

我不能使用位置：绝对；第二分区那是我的限制，您能给我其他选择吗？

— Piyush Dholariya

添加position: relative到.outside。（https://developer.mozilla.org/en-US/docs/CSS/position）

相对放置的元素仍被认为是文档中元素的正常流动。相反，绝对定位的元件从流中取出，因此在放置其他元件时不占用空间。绝对定位的元素相对于最近定位的祖先定位。如果不存在已定位的祖先，则使用初始容器。

“初始容器”将为<body>，但添加上面的.outside位置。

— 爆炸药
source