给出以下HTML：

Copyright Foo web designs

我想让#copyright贴在#container的底部。

我能在不使用绝对定位的情况下实现这一点吗？如果float属性支持"bottom"的值，这似乎可以解决问题，但不幸的是，它没有。

这种情况是布局表尚未消失的原因之一。用桌子做这件事非常简单，而且在任何地方都能工作。在CSS中这样做是非常困难的，跨浏览器支持也是如此。更不用说不可能记住如何正确地做。

为什么你需要在没有绝对定位的情况下进行？

@user的回答很好。这并不难，但你不知道@tomalak。有很多事情是桌子做不到的。

如果你需要堆积如山，那就不太好了。

@托马拉克，你怎么用桌子来做这个？

@Tomalak的CSS起初是一个巨大的痛苦，但是一旦你学会了定位的语义，CSS布局就很容易了。有疑问时：使用position:relative，并知道定位元素absolute的子元素相对于其父元素。

我不明白这个问题。为什么你需要使用绝对定位？容器是否有一个设定的高度，不管它包含什么内容？

试试我的答案@tomalak我想你会惊讶于它的简单性(在桌子上)

如果你有一个坚固的容器，我同意@tomalak。如果页脚在内容的底部，那么一个简单的DIV就可以工作了。

底部高度可变的保留页脚的可能副本

可能不会。

将position:relative分配给#container，然后将position:absolute; bottom:0;分配给#copyright。

#container {

position: relative;

}

#copyright {

position: absolute;

bottom: 0;

}

Copyright Foo web designs

相信托马拉克的声明，这是"非常困难的"。要求在没有所有工具的情况下这样做是不对的。

是的，只要记住需要的位置：父节点中的相对位置，使当前父节点：绝对位置仍然相对于父节点。

如何以版权为中心？文本对齐：居中于容器或版权似乎不起作用

@莫菲斯别忘了增加你的版权宽度(例如，版权宽度：100%；文本对齐：居中；)

如果容器上的position:relative破坏了您的设计，请记住您可以在容器内包含一个高度为100%的wrapper div，并添加position:relative。

很好的提示，这甚至适用于嵌套的DIV。

如果它是用于重复元素的，那么在其他情况下，哪个元素会被放置在每个元素的顶部？

这还不够接近。在最近的浏览器中，它位于可见屏幕的底部，但我不知道哪一个位于容器分区的底部。

哇，130票的答案，在实践中有严重的问题，特别是像一个页脚，似乎是OP的要求。请阅读Rick Reilly的回答了解详细信息。问题是绝对元素不再参与页面流。

一个绝对定位的元素寻找它最接近的父元素，即绝对或相对位置，以确定它的位置。如果一切都失败了，它就求助于身体(窗户)。因此，父母需要相对。

+因为它是最有效的解决方案。如果你有一般的CSS技巧，用其他容器和relative位置来固定un-flow元素是非常容易的。任何问题都有解决办法。如果你不想把脑子搞乱，想一个好的代码，那么…那么你就是一个非常糟糕的网络开发人员。

Arkana，如果将元素重新投入到流程中是如此容易的话，那么您能为我们所有不好的开发人员介绍一下您的解决方案吗？

@阿卡纳通知关于先前评论

在容器的底部添加一个边距，以防止页面内容受到版权保护。

#容器位置：相对；高度：100%版权位置：相对；底部：0；顶部：90%为我工作

实际上，@user接受的答案只有在窗口高且内容短的情况下才有效。但是，如果内容很高，窗口很短，它会将版权信息放在页面内容上，然后向下滚动查看内容，会留下一个浮动的版权通知。这使得这个解决方案对大多数页面(实际上像这个页面)都是无用的。

最常见的方法是演示的"css Sticky Footer"方法，或者稍微精简一些。这种方法非常有效——如果您有固定高度的页脚。

如果您需要一个可变高度的页脚，如果内容太短，它将出现在窗口底部；如果窗口太短，它将出现在内容底部，您会怎么做？

放下你的骄傲，用一张桌子。

例如：

* {

padding: 0;

margin: 0;

}

html, body {

height: 100%;

}

#container {

height: 100%;

border-collapse: collapse;

}

4

试试看。这将适用于任何窗口大小、任何内容量、任何大小的页脚、每个浏览器…甚至IE6。

如果你一想到要用一张桌子来排版就畏缩不前，花点时间问问自己为什么。CSS本来是为了让我们的生活更容易——总体上来说，它已经——但事实是，即使经过这么多年，它仍然是一个破碎的，反直觉的混乱。它不能解决所有的问题。它是不完整的。

表并不酷，但至少现在，它们有时是解决设计问题的最佳方法。

对我来说似乎是最好的答案。此外，您可以始终使用"css tables"(显示：table[-row/-cell])而不是HTML表。它提供了相同的布局，但没有语义。

填充：0；边距：0实际上只需要应用于所有td和tr元素。

如果您有一个生成页面的PHP脚本/其他脚本，您可以复制您的页脚，使用其中一个作为隐藏的"间隔符"，另一个绝对定位。间隔页脚确保无论页脚中有多少内容，都不会向上显示。

对于其他阅读这些评论的人来说：这与"骄傲"或"酷"无关。使用表进行布局实际上更为痛苦，尤其是对于大量内容。确保你不会错过一个TD，在添加内容时筛选这么多不相关的标记是很糟糕的。这是一个痛苦的原因，因为我们创建的HTML文档不仅仅是布局，而且如果文档的大部分内容不是表格数据，那么我们为什么要将其放入表格中呢？如果我们不喜欢按原意使用网络技术，那为什么要使用它们呢？使用桌面/移动应用程序发布内容

@Chiccodoro我已经实现了一个无表等价物，这是惊人的最小，请检查下面的答案

骄傲是无关紧要的。由于可访问性的原因，表不应用于布局。如果您曾经使用过屏幕阅读器，那么您将知道为什么表只能用于表数据。使用css表作为@chiccodoro状态。

@tyzoid更好，如果你有选择的话，用javascript复制页脚。这样，爬虫和屏幕阅读器就不会看到重复的内容。

我认为作为Web开发人员，可访问性比我们的商品更重要。真正的表格布局这是一个非常糟糕的做法，如果用户使用JAWS或其他屏幕阅读器，可能会很烦人。

1998年，我们想要的，实际上是成功的。它在2014年不起作用，所以唯一实用的解决方案是回到1998年，直到CSS被固定为执行原始HTML所能做的一切。

表格是许多定位问题的解决方案。简单、有效、直观、易懂。一个伟大的节省时间和生产力助推器的CSS位置尼，这是由白痴缓和。

@加布-你说的"我们"是什么？如果你的意思是你认为表格不适合文档，而基于HTML的应用程序不算数，因为应用程序开发人员没有权利玩你的玩具，那么你的大脑就有问题。另外，认为HTML、浏览器及其工作方式是由于精心设计的、目的明确、不应被破坏的设计，这种想法是极其幼稚的。浏览器环境是一个由半随机意图和机会主义使用演变而来的巨大混乱，这通常类似于使用电钻来存放钉子。

@但是，就文档类型的网页而言，我同意表格很少适用。

@我是一个Rails和.NET开发人员(请告诉我这意味着我也是一个"应用程序开发人员"！我需要提升自尊心，因为现在我不安全，我可能有"大脑问题")，所以我猜"我们"是指任何编写HTML标记的人。我同意互联网是一团乱麻，但我不确定这有什么关系。不管怎样，底线是：使用表进行大规模布局实际上比为开发人员和可访问性使用语义标记更痛苦(如上面其他人所述)。

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;

}

Align to the bottom

上面的解决方案可能更灵活，但是，这里有一个替代方案：

这里例子

.parent {

display: flex;

}

.child {

align-self: flex-end;

}

.parent {

height: 100px;

border: 5px solid #000;

display: flex;

}

.child {

height: 40px;

width: 100%;

background: #f00;

align-self: flex-end;

}

Align to the bottom

作为补充说明，您可能希望添加供应商前缀以获得更多支持。

或者，.parent { flex-direction: colum } .child { margin-top: auto }允许有其他内容，例如header:demo

@奥利奥，这实际上比我贴的好。谢谢Oriol。我会在某个时候更新这个。

我认为最好的解决方案，因为它不会破坏父母周围/内部的其他元素。

关于父母的column-reverse怎么样，这样你就不需要给孩子增加任何东西了？

很完美。干杯！)

喜欢灵活和边缘的组合！

应该接受答案！

是的，您可以在不使用absolute定位和不使用table的情况下进行此操作(使用带标记的螺钉等)。

演示文稿

这是测试工作在IE>7，铬，FF&amp；是一个非常容易添加到您的现有布局。

Some content you don't want affected by the"bottom floating" div

supports not just text

Some other content you want kept to the bottom

this is in a div

#container {

height:100%;

border-collapse:collapse;

display : table;

}

.foot {

display : table-row;

vertical-align : bottom;

height : 1px;

}

它有效地实现了float:bottom所希望的，甚至可以解释@rick reilly的答案中指出的问题！

尼斯！请注意，IIRC需要设置才能在ie上工作(<=8)；那些旧版本只支持"标准"模式下的display:table-XXX。但是标准模式也会破坏很多为IE6设计的页面。

我添加了内容…

您也可以使用flexbox-stackoverflow.com/questions/526035/&hellip；

我在江户城找到了更多的运气。我不需要vertical-align，height，或者border-collapse。

如果#container只包含#foot而不包含其他内容，这是否有效？

看来它至少需要一个不间断的空间，@solace

@哈斯布朗太棒了，最好的答案。但为什么需要height: 1px？

表的一个副产品(通常是人们追求的特性)是它们共享空间。如果没有height集，作为table-row集，布局引擎将尝试均匀地与表中的其他元素共享其高度；在本例中，使其达到50%。将其设置为1px时，布局引擎会尝试使其尽可能小，而不隐藏其内容(有效地使其再次表现为DIV，用于高度目的，同时保持vertical-align行为)。设置为1px的block元素通常会变为不可见)。

为我工作。我必须修复一些父容器以确保它们足够高。我必须用"100vh"而不是"100%"。

这是一个古老的问题，但这是一种独特的方法，在某些情况下可以有所帮助。纯CSS，无绝对定位，无固定高度，跨浏览器(IE9+)

看看那个工作的小提琴

因为正态流是"自上而下"的，我们不能简单地要求#copyrightdiv在没有某种绝对定位的情况下坚持在他父母的底部，但是如果我们希望#copyrightdiv坚持在他父母的顶部，这将非常简单，因为这是正态流方式。

所以我们会利用这个优势。我们将更改HTML中div的顺序，现在#copyrightDIV位于顶部，内容将立即跟随它。我们还使内容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);

}

4

请不要，看看现在的渲染有多糟糕i.stack.imgur.com/zp9hw.png

试试这个；

Copyright Foo web designs

@请不要在这样的答案中更改其他人的代码。如果你只是想把CSS和HTML分开，请注意你无意中把代码改成了别的东西，可能会使答案无效，当然也会改变海报的意图。

@泰勒，这不会再发生了。我很抱歉。

为#copyright上的元素创建另一个容器div。在上面加上一个新的div：它将强制页脚位于所有其他项下，就像使用相对定位(bottom:0px;的情况一样。

虽然这里提供的所有答案似乎都不适用于我的特定案例，但我看到了这篇文章，它提供了一个简洁的解决方案：

#container {

display: table;

}

#copyright {

display: table-footer-group;

}

我发现它非常有助于在移动显示器上应用响应式设计，而无需重新排序网站的所有HTML代码，将body本身设置为一个表。

请注意，只有第一个table-footer-group或table-header-group将被视为：如果有多个，其他的将被视为table-row-group。

如果您知道#container的height使用inline-block元素的文本对齐功能，那么您确实可以在不使用position:absolute的情况下使用bottom的框。

在这里你可以看到它的作用。

这是代码：

#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, 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;

}

content

footer

使用translatey和top属性

只需将element child设置为position:relative，然后将其向上移动：100%(即父元素的100%高度)，然后通过transform:translatey(即子元素高度的-100%)将其固定在父元素的底部。

效益

不从页面流中提取元素

它是动态的

但仍需解决：(

.copyright{

position: relative;

top: 100%;

transform: translateY(-100%);

}

不要忘记旧浏览器的前缀。

如果你想让它"粘"到底，不管容器的高度如何，那么绝对定位就是你要走的路。当然，如果copyright元素是容器中的最后一个元素，那么它始终位于底部。

你能详细讨论一下你的问题吗？准确地解释你想做什么(以及为什么你不想使用绝对定位)？

另外，如果有关于使用position:absolute;或position:relative;的规定，您可以尝试使用padding父级div或放置margin-top:x;。在大多数情况下，这不是一个很好的方法，但在某些情况下，它可能会派上用场。

如果您不知道子块的高度：

#parent{background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;}

.child{background:red;vertical-align:bottom;}

child

http://jsbin.com/uluxifon/3/edit/编辑

如果知道子块的高度，请添加子块，然后添加填充顶部/边距顶部：

#parent{background:green;width:200px;height:130px;padding-top:70px;}

.child{background:red;vertical-align:bottom;height:130px;}

child

也许这对某些人有帮助：您可以将DIV放在另一个DIV之外，然后使用负边距将其向上推：

Hello!

Copyright Foo web designs

对于容器中只有一个子级的对象，可以使用table-cell和vertical-align方法，该方法可靠地将单个div定位在其父级的底部。

注意，使用table-footer-group作为上述其他答案将打破父级table的高度计算。

#container {

display: table;

width: 100%;

height: 200px;

}

#item {

display: table-cell;

vertical-align: bottom;

}

Single bottom item

仅仅因为这一点没有被提及，在像你这样的情况下通常会很好地工作：

将copyright div放在container div之后

您只需要以与另一个容器类似的方式(相同的总宽度、居中等)格式化版权DIV，一切都很好。

CSS：

#container, #copyright {

width: 1000px;

margin:0 auto;

}

HTML：

Copyright Foo web designs

唯一可能不理想的时间是，当您的container div使用height:100%声明时，用户需要向下滚动查看版权。但即使如此，你仍然可以四处工作(例如，margin-top:-20px——当你的版权元素高度为20px时)。

无绝对定位

无表格布局

没有疯狂的CSS，在其他浏览器中看起来都不一样(至少，你知道)

简单明了的格式

旁白：我知道手术室要求的解决方案是"…贴在"容器"分区的底部……，而不是它下面的东西，但拜托，人们正在寻找好的解决方案，这就是一个！

在OP的情况下，这个解决方案只有在版权为固定高度的情况下才是好的(然后您可以设置margin-top: -{element height}。

@GAJUS：这不是绝对定位，也不是固定定位。这完全符合操作的需要(无论版权高度如何)，唯一的例外是版权DIV不在第一个容器中。操作要求版权粘贴在容器的底部，而不是页面！！

对不起，如果集装箱的高度是固定的，我是说不会。

除非我自己弄错了，否则当元素高度由另一个元素决定时，OP试图解决的真正问题是元素的底部，例如注释jsbin.com/acovevi/3。这里你不能简单地把按钮放在容器外面。要进一步说明这个问题，请参阅jsbin.com/acovevi/4。

操作人员说："我希望版权坚持在容器的底部。"所以这个问题还不完全清楚。此外，这是一个有效的例子，在任何情况下，它应该"坚持到底的容器"。这个解决方案应该是有用的，有一个干净的方法，并适用于许多布局。例如，任何包含滚动内容的页面，如stackoverflow.com；-)

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;}

Copyright Foo web designs

Copyright Foo web designs

这里有一种方法，目标是使具有已知高度和宽度(至少大约)的元素向右浮动并保持在底部，同时作为其他元素的内联元素。它集中在右下角，因为您可以通过其他方法轻松地将其放置在任何其他角落。

我需要制作一个导航栏，它的右下角将有实际的链接，以及随机的兄弟元素，同时确保导航栏本身能够正确拉伸，而不会破坏布局。我使用了一个"shadow"元素来占据导航栏的链接空间，并将其添加到容器子节点的末尾。

Copyright Foo web designs

filler

#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 */

}

样式分区，position:absolute;bottom:5px;width:100%;正在工作，但它需要更多的滚动情况。

window.onscroll = function() {

var v = document.getElementById("copyright");

v.style.position ="fixed";

v.style.bottom ="5px";

}