我怎样才能把我的div放在容器的底部？
鉴于以下HTML：
<div id="container"> <!-- Other elements here --> <div id="copyright"> Copyright Foo web designs </div> </div> 我想#copyright坚持#container的底部。
我可以做到这一点，而不使用绝对定位？ 如果float属性支持“底部”的值，那么看起来会做的，但不幸的是，它不。
可能不是。
指定position:relative对于#container ，然后position:absolute; bottom:0; position:absolute; bottom:0; 到#copyright 。
#container { } #copyright { position: absolute; bottom: 0; }
<div id="container"> <!-- Other elements here --> <div id="copyright"> Copyright Foo web designs </div> </div>
实际上，只有当窗口很高，内容很短时，@ User才能接受的答案。 但是，如果内容较高且窗口较短，则会在页面内容上放置版权信息，然后向下滚动以查看内容将为您留下浮动版权声明。 这使得这个解决scheme对于大多数页面（实际上就像这个页面）是无用的。
这样做的最常见的方法是在这里展示的“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>
是的，你可以做到这一点，没有absolute位置，并没有使用table （这与螺杆标记等）。
DEMO
这是testing工作在IE> 7，铬，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; }
它有效地做了什么float:bottom ，甚至可以解释@Reick Reilly的答案中指出的问题！
Flexbox方法！
在支持的浏览器中 ，您可以使用以下内容：
示例在这里
.parent { display: flex; flex-direction: column; } .child { margin-top: auto; }
.parent { height: 100px; border: 5px solid #000; display: flex; flex-direction: column; } .child { height: 40px; width: 100%; background: #f00; margin-top: auto; }
<div class="parent"> <div class="child">Align to the bottom</div> </div>
这是一个古老的问题，但这是一个独特的方法，可以帮助几个案例。
纯CSS，没有绝对定位，没有固定任何高度，跨浏览器（IE9 +）
检查出工作小提琴
因为正常的stream程是“从上到下”的，所以我们不能简单地要求#copyright div粘贴到父母的底部而没有绝对的定位，但是如果我们想让#copyright div粘到顶部他的父母，这将是非常简单的 – 因为这是正常的stream动方式。
所以我们会利用这个优势。 我们将在HTML中改变div的顺序，现在#copyright div在顶部，内容马上就会跟着它。 我们也使内容div一路延伸（使用伪元素和清除技术）
现在只是把这个顺序颠倒过来的问题。 这可以通过CSS转换轻松完成。
我们将容器旋转180度，现在：上下。 （并且我们反过来看内容再次看起来正常）
如果我们想要在内容区域内使用scroolbar，那么我们需要多应用一些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>
尝试这个;
<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>
为#copyright上面的元素创build另一个容器div 。 只要在版权上方添加一个新的div ： <div style="clear:both;"></div>这将强制页脚处于其他任何位置，就像使用相对位置（ bottom:0px; ）一样。
如果使用inline-block元素的文本alignmentfunction知道#container的height ，则确实可以将该框align bottom而不使用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; }
链接在这里 。
HTML：
<div class="overlay"> <div class="container"> <div class="height"> content </div> </div> <div class="footer"> footer </div> </div>
CSS：
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; }
虽然这里提供的答案似乎没有适用于我的具体情况，但我碰到了这个提供了这个简洁的解决scheme的文章 ：
#container { display: table; } #copyright { display: table-footer-group; }
我发现它非常适用于移动显示应用响应式devise，而无需重新排列网站的所有html代码，将body本身设置为表格。
注意，只有第一个table-footer-group或者table-header-group会被渲染，如果有多个，其他的会被渲染成table-row-group 。
如果你想让它“粘”到底部，不pipe容器的高度如何，那绝对的定位就是要走的路。 当然，如果版权元素是容器中的最后一个，它总是处于最底层。
你可以扩展你的问题吗？ 解释你正在试图做什么（以及为什么你不想使用绝对定位）？
另外，如果有使用position:absolute;的规定position:absolute; 或position:relative; ，你总是可以尝试padding 父 div或放一个margin-top:x; 。 在大多数情况下，这不是一个很好的方法，但在某些情况下可能派上用场。
使用translateY和top属性
只要设置元素的孩子的位置：相对而不是移动它的顶部：100％（这是家长的100％的高度），并通过变换坚持父母的底部：translateY（-100％）（这是-100％的高度孩子）。
好处
- 你不会从页面stream中获取元素
- 它是dynamic的
但仍然只是解决方法:(
.copyright{ position: relative; top: 100%; transform: translateY(-100%); }
不要忘记旧浏览器的前缀。
如果你不知道小孩的高度：
#parent{background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;} .child{background:red;vertical-align:bottom;} </style> </head> <body> <div id="parent"> <div class="child">child </div> </div>
http://jsbin.com/ULUXIFon/3/edit
如果您知道子块的高度，请添加子块，然后添加padding-top / margin-top：
#parent{background:green;width:200px;height:130px;padding-top:70px;} .child{background:red;vertical-align:bottom;height:130px;} <div id="parent"> <div class="child">child </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>
正因为这个没有被提及，所以在你这样的情况下通常会起作用：
在容器div 之后放置版权div
您只需要以与其他容器类似的方式格式化版权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被声明为height:100% ，用户需要向下滚动才能看到版权。 但即使如此，你仍然可以解决（例如margin-top:-20px – 当你的版权元素的高度是20px）。
- 没有绝对的定位
- 没有表格布局
- 没有疯狂的CSS，在其他浏览器看起来不同（至lessIE浏览器，你知道）
- 简单明了的格式
除此之外：我知道OP要求的解决scheme是“…坚持到'容器'的底部…” ，而不是下面的东西，但来吧，人们在这里寻找好的解决scheme，而这是一个！
这里是一个方法，目标是使一个已知高度和宽度（至less大致）的元素向右浮动并保持在底部，同时作为其他元素的内联元素。 它集中在右下方，因为您可以通过其他方法轻松将其放置在任何其他angular落。
我需要制作一个导航栏，在右下方有实际的链接，随机的兄弟元素，同时确保栏本身正确拉伸，而不会中断布局。 我使用了“阴影”元素来占据导航栏的链接空间，并将其添加到容器的子节点的末尾。
<!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>
在CSS中没有什么叫float:bottom 。 最好的方法是在这种情况下使用定位：
position:absolute; bottom:0;
#container{width:100%; float:left; position:relative;} #copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;} #container{background:gray; height:100px;}
<div id="container"> <!-- Other elements here --> <div id="copyright"> Copyright Foo web designs </div> </div>
对于那些在容器中只有一个孩子的人来说，可以使用table-cell和vertical-align方法，这个方法可靠地在父代的底部定位一个div。
请注意，使用table-footer-group作为其他答案将破坏父table的高度计算。
#container { display: table; width: 100%; height: 200px; } #item { display: table-cell; vertical-align: bottom; }
<div id="container"> <div id="item">Single bottom item</div> </div>
div的风格， position:absolute;bottom:5px;width:100%; 正在工作，但它需要更多的scrollup情况。
window.onscroll = function() { var v = document.getElementById("copyright"); v.style.position = "fixed"; v.style.bottom = "5px"; }
