给定以下HTML:
< div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?
给定以下HTML:
< div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?
当前回答
CSS中没有所谓的float:bottom。最好的方法是在这种情况下使用定位:
position:absolute;
bottom:0;
其他回答
可能不是。
指定位置:相对于#容器,然后position:绝对;底部:0;#版权。
#{容器 位置:相对; } #{版权 位置:绝对的; 底部:0; } < div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
你可以通过为顶部的内容分配可用空间来使用网格:
#{容器 显示:网格; Grid-template-rows: 1fr auto; 高度:10眼动;/*或100%或任何*/ } < div id = "容器" > 这是随机内容。 < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
虽然这里提供的答案似乎都不适用于我的特定情况,但我看到了一篇文章,它提供了一个简洁的解决方案:
#container {
display: table;
}
#copyright {
display: table-footer-group;
}
我发现它非常有用,适用于移动显示的响应式设计,而不必重新排序网站的所有html代码,将主体本身设置为一个表。
请注意,只有第一个表脚-组或表头-组会被这样呈现:如果有多个表脚-组,其他的将被这样呈现。
#{容器宽度:100%;浮:左;位置:相对;} #{版权:绝对;底部:0 px;左:0 px;背景:# F00;宽度:100%;} #容器{背景:灰色;身高:100 px;} < div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
< div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
为#copyright上面的元素创建另一个容器div。就在版权上面添加一个新的div: < div风格= "明确:;" > < / div > 它将强制页脚位于其他所有内容的下面,就像使用相对定位(bottom:0px;)的情况一样。