给定以下HTML:
< div id = "容器" > <！——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?
当前回答
如果你不知道子块的高度:
#{母公司 背景:绿色; 宽度:200 px; 身高:200 px; 显示:表格单元; vertical-align:底部; ｝ .child { 背景:红色; vertical-align:底部; ｝ < div id = "父" > < div class = "孩子" >的孩子 < / div > < / div >
http://jsbin.com/ULUXIFon/3/edit
如果你知道子块的高度，添加子块，然后添加padding-top/margin-top:
#{母公司 背景:绿色; 宽度:200 px; 身高:130 px; padding-top: 70 px; ｝ .child { 背景:红色; vertical-align: 底; 身高:130 px; ｝ < div id = "父" > < div class = "孩子" >的孩子 < / div > < / div >
其他回答
如果你想让它“粘”在底部，不管容器的高度如何，那么绝对定位是要走的路。当然，如果版权元素是容器中的最后一个，它将始终位于底部。
你能详细说明一下你的问题吗?准确解释你想要做什么(以及为什么你不想使用绝对定位)?
显示:w3schools.com
有位置的元素:绝对的;定位相对于 最近的定位祖先(而不是相对于 视口，像固定)。
所以你需要将父元素定位为相对或绝对元素，等等，并将所需元素定位为绝对元素，然后将bottom设置为0。
针对此特定场景的解决方案:
将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>
灵活的方法!
在受支持的浏览器中，您可以使用以下方法:
例子
.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 >
作为旁注，您可能希望添加供应商前缀以获得额外支持。
代码依赖链接在这里。
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>
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
