给定以下HTML:
< div id = "容器" > <！——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?
如果你想让它“粘”在底部，不管容器的高度如何，那么绝对定位是要走的路。当然，如果版权元素是容器中的最后一个，它将始终位于底部。
你能详细说明一下你的问题吗?准确解释你想要做什么(以及为什么你不想使用绝对定位)?
可能不是。
指定位置:相对于#容器，然后position:绝对;底部:0;#版权。
#{容器 位置:相对; ｝ #{版权 位置:绝对的; 底部:0; ｝ < div id = "容器" > <！——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
试试这个;
<div id="container">
<div style="height: 100%; border:1px solid #ff0000;">
<!-- Other elements here -->
</div>
</div>
<div id="copyright" style="position:relative;border:1px solid #00ff00;top:-25px">
Copyright Foo web designs
</div>
实际上，@User接受的答案只有在窗口很高而内容很短的情况下才有效。但如果内容很高，窗口很短，它会把版权信息放在页面内容之上，然后向下滚动查看内容，会给你留下一个浮动的版权通知。这使得这个解决方案对于大多数页面(实际上，就像这个页面)毫无用处。
最常见的方法是“CSS粘性页脚”方法，或者是一种更简洁的方法。这种方法非常有效——如果你有一个固定高度的页脚。
如果你需要一个可变高度的页脚，如果内容太短，它会出现在窗口的底部，如果窗口太短，它会出现在内容的底部，你会怎么做?
放下你的骄傲，使用一张桌子。
例如:
* { padding: 0; margin: 0; } html, body { height: 100%; } #container { height: 100%; border-collapse: collapse; } <!DOCTYPE html> <html> <body> <table id="container"> <tr> <td valign="top"> <div id="main">Lorem ipsum, etc.</div> </td> </tr> <tr> <td valign="bottom"> <div id="footer">Copyright some evil company...</div> </td> </tr> </table> </body> </html>
试试吧。这将适用于任何窗口大小，任何数量的内容，任何大小的页脚，在每个浏览器…甚至IE6。
如果你对使用表格布局的想法感到畏缩，花点时间问问自己为什么。CSS应该让我们的生活更简单——总的来说，它做到了——但事实是，即使经过了这么多年，它仍然是一个破碎的、违反直觉的混乱。它不能解决所有问题。它是不完整的。
表格并不酷，但至少就目前而言，它们有时是解决设计问题的最佳方法。
此外，如果有使用位置的规定:绝对;或者position:relative;，你总是可以尝试填充父div或放置margin-top:x;。在大多数情况下不是一个很好的方法，但在某些情况下可能会派上用场。
如果您使用内联块元素的文本对齐特性知道#容器的高度，您确实可以在不使用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;
}
正因为这一点根本没有被提及，在你这种情况下通常有效的方法是:
将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的底部…”，而不是下面的东西，但拜托，人们在这里寻找好的解决方案，这就是一个!
代码依赖链接在这里。
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>
为#copyright上面的元素创建另一个容器div。就在版权上面添加一个新的div: < div风格= "明确:;" > < / div > 它将强制页脚位于其他所有内容的下面，就像使用相对定位(bottom:0px;)的情况一样。
下面是一种方法，目的是使具有已知高度和宽度(至少大约)的元素浮到右边并停留在底部，同时作为其他元素的内联元素。它集中在右下角，因为您可以通过其他方法轻松地将它放置在任何其他角落。
我需要制作一个导航栏，在右下角有实际的链接和随机的兄弟元素，同时确保栏本身适当拉伸，而不破坏布局。我使用了一个“shadow”元素来占据导航栏的链接空间，并将其添加到容器子节点的末尾。
<!DOCTYPE html>
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
<span id="copyright-s">filler</span>
</div>
<style>
#copyright {
display:inline-block;
position:absolute;
bottom:0;
right:0;
}
#copyright-s {
float:right;
visibility:hidden;
width:20em; /* ~ #copyright.style.width */
height:3em; /* ~ #copyright.style.height */
}
</style>
是的，你可以在没有绝对定位的情况下做到这一点，也可以不使用表(这与标记有关)。
演示 这是经过测试的工作在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的回答中指出的问题!
纯CSS，没有绝对定位，没有固定高度，跨浏览器(IE9+)
看看那个工作小提琴
因为正常的流程是“从上到下”，我们不能简单地要求#copyright div粘到他的父端的底部而没有某种绝对的定位，但如果我们想要#copyright div粘到他的父端的顶部，这将是非常简单的-因为这是正常的流程方式。
所以我们要利用这一点。 我们将改变div在HTML中的顺序，现在#copyright div在顶部，内容紧随其后。 我们还让内容div一直延伸(使用伪元素和清除技术)
现在只需要将视图中的顺序颠倒过来。这可以很容易地用CSS转换。
我们把容器旋转180度，现在:向上就是向下。(我们将内容反向，使其看起来正常)
如果我们想在内容区域内有一个滚动条，我们需要应用更多的CSS魔法。如图所示[在这个例子中，内容在标题下面-但它的想法是一样的]
* { margin: 0; padding: 0; } html, body, #Container { height: 100%; color: white; } #Container:before { content: ''; height: 100%; float: left; } #Copyright { background-color: green; } #Stretch { background-color: blue; } #Stretch:after { content: ''; display: block; clear: both; } #Container, #Container>div { -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotate(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg); } <div id="Container"> <div id="Copyright"> Copyright Foo web designs </div> <div id="Stretch"> <!-- Other elements here --> <div>Element 1</div> <div>Element 2</div> </div> </div>
如果你不知道子块的高度:
#{母公司 背景:绿色; 宽度: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 >
也许这对某些人有帮助:你可以总是把一个div放在另一个div的外面，然后用负边距把它往上推:
<div id="container" style="background-color: #ccc; padding-bottom: 30px;">
Hello!
</div>
<div id="copyright" style="margin-top: -20px;">
Copyright Foo web designs
</div>
虽然这里提供的答案似乎都不适用于我的特定情况，但我看到了一篇文章，它提供了一个简洁的解决方案:
#container {
display: table;
}
#copyright {
display: table-footer-group;
}
我发现它非常有用，适用于移动显示的响应式设计，而不必重新排序网站的所有html代码，将主体本身设置为一个表。
请注意，只有第一个表脚-组或表头-组会被这样呈现:如果有多个表脚-组，其他的将被这样呈现。
灵活的方法!
在受支持的浏览器中，您可以使用以下方法:
例子
.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 >
作为旁注，您可能希望添加供应商前缀以获得额外支持。
使用translateY和top属性
只需将子元素设置为position: relative，然后将其移动到顶部:100%(这是父元素的100%高度)，并通过transform: translateY(-100%)(这是子元素高度的-100%)坚持到父元素的底部。
好处
您不需要从页面流中获取元素 它是动态的
但仍然需要变通:(
.copyright{
position: relative;
top: 100%;
transform: translateY(-100%);
}
不要忘记旧浏览器的前缀。
#{容器宽度:100%;浮:左;位置:相对;} #{版权:绝对;底部:0 px;左:0 px;背景:# F00;宽度:100%;} #容器{背景:灰色;身高:100 px;} < div id = "容器" > <！——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
< div id = "容器" > <！——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
对于容器中只有一个子div的容器，可以使用表格单元格和垂直对齐方法，这种方法可以可靠地将单个div定位在父div的底部。
注意，使用table-footer-group作为前面提到的其他答案将破坏父表的高度计算。
#{容器 显示:表; 宽度:100%; 身高:200 px; ｝ #{项 显示:表格单元; vertical-align:底部; ｝ < div id = "容器" > <div id="item">单个底部项目</div> < / div >
CSS网格
由于CSS Grid的使用正在增加，我想建议align-self到网格容器内的元素。
Align-self可以包含任何值:end, self-end, flex-end，如下例所示。
#{母公司 显示:网格; ｝ # child1 { align-self:结束; ｝ /*额外的样式片段*/ #{母公司 身高:150 px; 背景:# 5548 b0; 颜色:# fff; 填充:10 px; 字体类型:无衬线; ｝ # child1 { 高度:50 px; 宽度:50 px; 背景:# 6 a67ce; text-align:中心; vertical-align:中间; 行高:50 px; ｝ < div id = "父" > <！——这里的其他元素——> " child1 " < div id = > 1 < / div > < / div >
不要在底部使用"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>
显示: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>
你可以通过为顶部的内容分配可用空间来使用网格:
#{容器 显示:网格; Grid-template-rows: 1fr auto; 高度:10眼动;/*或100%或任何*/ } < div id = "容器" > 这是随机内容。 < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
