给定以下HTML:
< div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?
给定以下HTML:
< div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?
当前回答
灵活的方法!
在受支持的浏览器中,您可以使用以下方法:
例子
.parent {
display: flex;
flex-direction: column;
}
.child {
margin-top: auto;
}
.parent { 身高:100 px; 边框:5px实体#000; 显示:flex; flex-direction:列; } .child { 高度:40像素; 宽度:100%; 背景:# f00; margin-top:汽车; } < div class = "父" > <div class="child">对齐到底部</div> < / div >
上面的解决方案可能更灵活,但是,这里有一个替代方案:
例子
.parent {
display: flex;
}
.child {
align-self: flex-end;
}
.parent { 身高:100 px; 边框:5px实体#000; 显示:flex; } .child { 高度:40像素; 宽度:100%; 背景:# f00; align-self: flex-end; } < div class = "父" > <div class="child">对齐到底部</div> < / div >
作为旁注,您可能希望添加供应商前缀以获得额外支持。
其他回答
正因为这一点根本没有被提及,在你这种情况下通常有效的方法是:
将copyright-div放在container-div之后
您只需要以与其他容器类似的方式格式化copyright-div(相同的整体宽度、居中等),就可以了。
CSS:
#container, #copyright {
width: 1000px;
margin:0 auto;
}
HTML:
<div id="container">
<!-- Other elements here -->
</div>
<div id="copyright">
Copyright Foo web designs
</div>
唯一不理想的情况是当container-div声明高度为:100%时,用户需要向下滚动以查看版权。但即使如此,你仍然可以修改(例如margin-top:-20px -当你的版权元素的高度是20px)。
没有绝对定位 没有表格布局 没有疯狂的css,其他浏览器看起来都不一样(至少IE是这样) 简单明了的格式
旁白:我知道OP要求的解决方案是“……粘在“容器”div的底部…”,而不是下面的东西,但拜托,人们在这里寻找好的解决方案,这就是一个!
如果您使用内联块元素的文本对齐特性知道#容器的高度,您确实可以在不使用position:absolute的情况下将方框对齐到底部。
在这里你可以看到它的行动。
这是代码:
#container {
/* So the #container most have a fixed height */
height: 300px;
line-height: 300px;
background:Red;
}
#container > * {
/* Restore Line height to Normal */
line-height: 1.2em;
}
#copyright {
display:inline-block;
vertical-align:bottom;
width:100%; /* Let it be a block */
background:green;
}
使用translateY和top属性
只需将子元素设置为position: relative,然后将其移动到顶部:100%(这是父元素的100%高度),并通过transform: translateY(-100%)(这是子元素高度的-100%)坚持到父元素的底部。
好处
您不需要从页面流中获取元素 它是动态的
但仍然需要变通:(
.copyright{
position: relative;
top: 100%;
transform: translateY(-100%);
}
不要忘记旧浏览器的前缀。
是的,你可以在没有绝对定位的情况下做到这一点,也可以不使用表(这与标记有关)。
演示 这是经过测试的工作在IE>7, chrome, FF &是一个非常容易添加到您现有的布局。
<div id="container">
Some content you don't want affected by the "bottom floating" div
<div>supports not just text</div>
<div class="foot">
Some other content you want kept to the bottom
<div>this is in a div</div>
</div>
</div>
#container {
height:100%;
border-collapse:collapse;
display : table;
}
.foot {
display : table-row;
vertical-align : bottom;
height : 1px;
}
它有效地做了浮动:底部会做的事情,甚至解释了@Rick Reilly的回答中指出的问题!
代码依赖链接在这里。
html, body { width: 100%; height: 100%; } .overlay { min-height: 100%; position: relative; } .container { width: 900px; position: relative; padding-bottom: 50px; } .height { width: 900px; height: 50px; } .footer { width: 900px; height: 50px; position: absolute; bottom: 0; } <div class="overlay"> <div class="container"> <div class="height"> content </div> </div> <div class="footer"> footer </div> </div>