给定以下HTML:
< div id = "容器" > <！——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?
当前回答
不要在底部使用"position:absolute"作为粘性页脚。那么你可以这样做:
html, body { height: 100%; margin: 0; } .wrapper { min-height: 100%; /* Equal to height of footer */ /* But also accounting for potential margin-bottom of last child */ margin-bottom: -50px; } .footer{ background: #000; text-align: center; color: #fff; } .footer, .push { height: 50px; } <html> <body> <!--HTML Code--> <div class="wrapper"> <div class="content">content</div> <div class="push"></div> </div> <footer class="footer">test</footer> </body> </html>
其他回答
是的，你可以在没有绝对定位的情况下做到这一点，也可以不使用表(这与标记有关)。
演示 这是经过测试的工作在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的回答中指出的问题!
为#copyright上面的元素创建另一个容器div。就在版权上面添加一个新的div: < div风格= "明确:;" > < / div > 它将强制页脚位于其他所有内容的下面，就像使用相对定位(bottom:0px;)的情况一样。
如果您使用内联块元素的文本对齐特性知道#容器的高度，您确实可以在不使用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;
}
针对此特定场景的解决方案:
将inner放在父元素的底部。父节点的高度由它的“最高”兄弟节点的高度设置
设置:
我有一行与多个<div class="容器"> 这些<div class="container">在另一个<div class="supercontainer">中彼此相邻 每个<div class="container">都有3个内部div相互重叠:<div class="title">， <div class="content">， <div class="footer">
期望的结果:
所有<div class="container">的高度相同。高度没有在px中定义，它将是其中“最高”的高度。 <div class="title">应该在<div class="container">的顶部 <div class="content">应该放在<div class="title">下面 <div class="footer">应该放在<div class="container">的底部，而不与前面的内容重叠
这是当前状态:https://codepen.io/xavier-atero/pen/ExvWQww
.supercontainer { border: solid 1px black; display: flex; } .container, .other-container { position: relative; border: solid 1px red; width: 200px; margin: 10px; } .title { margin: 10px; border: solid 1px blue; } .content { margin: 10px; border: solid 1px cyan; } .footer { margin: 10px; background: lime; } <body> <div class="supercontainer"> <div class="container"> <div class="title"> This part represents the title and it is placed on top </div> <div class="content"> This one represents the body and it is placed below the title </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> <div class="other-container"> <div class="title"> This part represents the title and it is placed on top. </div> <div class="content"> This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged. </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> </div> </body>
__________解决方案与FLEXBOX __________
这是结果:https://codepen.io/xavier-atero/pen/MWvpBMz
.supercontainer { border: solid 1px black; display: flex; } .container, .other-container { position: relative; border: solid 1px red; width: 200px; margin: 10px; display: flex; flex-direction: column; } .title { margin: 10px; border: solid 1px blue; } .content { margin: 10px; border: solid 1px cyan; } .footer { margin: 10px; background: lime; margin-top: auto; border: solid 1px fuchsia; } <body> <div class="supercontainer"> <div class="container"> <div class="title"> This part represents the title and it is placed on top </div> <div class="content"> This one represents the body and it is placed below the title </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> <div class="other-container"> <div class="title"> This part represents the title and it is placed on top. </div> <div class="content"> This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged. </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> </div> </body>
__________带有TABLE-ROW __________的解决方案
这是结果:https://codepen.io/xavier-atero/pen/rNzyKJm
.supercontainer { border: solid 1px black; display: flex; } .container, .other-container { position: relative; border: solid 1px red; width: 200px; margin: 10px; border-collapse:collapse; display : table; } .title { margin: 10px; border: solid 1px blue; } .content { margin: 10px; border: solid 1px cyan; } .footer { margin: 10px; background: lime; border: solid 1px fuchsia; display: table-row; vertical-align: bottom; height: 1px; } <body> <div class="supercontainer"> <div class="container"> <div class="title"> This part represents the title and it is placed on top </div> <div class="content"> This one represents the body and it is placed below the title </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> <div class="other-container"> <div class="title"> This part represents the title and it is placed on top. </div> <div class="content"> This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged. </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> </div> </body>
对于容器中只有一个子div的容器，可以使用表格单元格和垂直对齐方法，这种方法可以可靠地将单个div定位在父div的底部。
注意，使用table-footer-group作为前面提到的其他答案将破坏父表的高度计算。
#{容器 显示:表; 宽度:100%; 身高:200 px; ｝ #{项 显示:表格单元; vertical-align:底部; ｝ < div id = "容器" > <div id="item">单个底部项目</div> < / div >
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
