给定以下HTML:

< div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >

我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?


当前回答

为#copyright上面的元素创建另一个容器div。就在版权上面添加一个新的div: < div风格= "明确:;" > < / div > 它将强制页脚位于其他所有内容的下面,就像使用相对定位(bottom:0px;)的情况一样。

其他回答

正因为这一点根本没有被提及,在你这种情况下通常有效的方法是:

将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的底部…”,而不是下面的东西,但拜托,人们在这里寻找好的解决方案,这就是一个!

纯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>

如果你想让它“粘”在底部,不管容器的高度如何,那么绝对定位是要走的路。当然,如果版权元素是容器中的最后一个,它将始终位于底部。

你能详细说明一下你的问题吗?准确解释你想要做什么(以及为什么你不想使用绝对定位)?

可能不是。

指定位置:相对于#容器,然后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>