css - 位置div到包含div的底部

如何将div放置到包含div的底部？css - 位置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>

此代码将文本“内部”放在页面的底部。

来源

2013-03-12 nagy.zsolt.hun

.outside needs'position：relative;' – Imperative 2013-03-12 10:26:11

relative，然后它不知道要保存子节点内容需要多大，所以除非这是一个静态值，否则返回到原来的问题。如何将一个div放在另一个div的底部（暗示：“没有破坏所有东西”）。 – JosephK 2017-08-20 11:40:55

110

.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中的最近的相对定位的父，如果一个没有定义将使用的身体。

来源

2013-03-12 10:26:06 Karl

谢谢。你能解释为什么吗？ – 2013-03-12 10:27:18

+31

“绝对”搜索最近的“亲属”父亲。默认情况下它是'document'的'body'。因此，如果没有父DOM对象（'.outside'）具有“相对”属性，则'.inside'将会转到body标签的底部。 – 2013-03-12 10:29:31

“*绝对定位查找DOM中最近的相对定位的父级，如果没有定义，它将使用body。*”您刚刚为我解释**非常**！现在我真的开始了解CSS。 ***谢谢！*** – 2014-04-28 21:22:23

将position:relative指定为.outside，然后将position:absolute; bottom:0;指定给您的.inside。

像这样：

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

来源

2013-03-12 10:26:10 lifetimes

简单而真棒。 – 2015-06-09 15:51:11

这可能是粘性页脚的基础不可能吗？ – 2015-08-23 16:12:23

我不能使用position：absolute;为第二个div。那是我的限制，你能否给我其他选择？ – 2016-06-29 06:18:17

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

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

“初始容器”将为<body>，但添加上述内容将使.outside定位。

来源

2013-03-12 10:30:39

IMO的最佳答案;它实际上有一个解释！ – Bojangles 2013-03-12 10:34:52

css - 位置div到包含div的底部

回答

相关问题