给定以下HTML:
< div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?
给定以下HTML:
< div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?
当前回答
此外,如果有使用位置的规定:绝对;或者position:relative;,你总是可以尝试填充父div或放置margin-top:x;。在大多数情况下不是一个很好的方法,但在某些情况下可能会派上用场。
其他回答
正因为这一点根本没有被提及,在你这种情况下通常有效的方法是:
将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的底部…”,而不是下面的东西,但拜托,人们在这里寻找好的解决方案,这就是一个!
为#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>
灵活的方法!
在受支持的浏览器中,您可以使用以下方法:
例子
.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 >
作为旁注,您可能希望添加供应商前缀以获得额外支持。
实际上,@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应该让我们的生活更简单——总的来说,它做到了——但事实是,即使经过了这么多年,它仍然是一个破碎的、违反直觉的混乱。它不能解决所有问题。它是不完整的。
表格并不酷,但至少就目前而言,它们有时是解决设计问题的最佳方法。