给出以下HTML:
<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>我想#copyright坚持到底#container.
我可以不使用绝对定位来实现这一目标吗 如果float属性支持'bottom'的值,那么似乎可以做到这一点,但不幸的是,它没有.
Use*_*ser 876
可能不是.
分配position:relative给#container,然后分配position:absolute; bottom:0;给#copyright.
#container {
position: relative;
}
#copyright {
position: absolute;
bottom: 0;
}<div id="container">
<!-- Other elements here -->
<div id="copyright">
Copyright Foo web designs
</div>
</div>小智 337
实际上,@ 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本来应该让我们的生活变得更轻松 - 而且整体而言 - 但事实是,即使经过这么多年,它仍然是一个破碎的,反直觉的混乱.它无法解决所有问题.它不完整.
表格并不酷,但至少目前,它们有时是解决设计问题的最佳方法.
Jos*_*ier 145
在支持的浏览器中,您可以使用以下内容:
.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>上面的解决方案可能更灵活,但是,这里有一个替代解决方案:
.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;
}<div class="parent">
<div class="child">Align to the bottom</div>
</div>作为旁注,您可能需要添加供应商前缀以获得其他支持.
Has*_*own 111
是的,你可以做到这一点,没有absolute定位,也没有使用tables(带有标记的螺丝等).
演示
经过测试,可以在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;
}
float:bottom即使考虑到@Rick Reilly的回答中指出的问题,它也能有效地做到这一点!
avr*_*ool 19
这是一个古老的问题,但这是一种独特的方法,可以在几种情况下提供帮助.
看看工作小提琴
因为正常的流量是"从上到下",我们不能简单地要求#copyrightdiv坚持他父母的底部而没有绝对的某种定位,但是如果我们想让#copyrightdiv坚持他父母的顶部,那么将非常简单 - 因为这是正常的流动方式.
所以我们将利用这个优势.我们将改变divHTML中s 的顺序,现在#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);
}<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>Man*_*mar 12
由于 CSS Grid 的使用越来越多，我想建议align-self使用网格容器内的元素。
align-self可以包含任何值：end, self-end,flex-end对于以下示例。
#parent {
display: grid;
}
#child1 {
align-self: end;
}
/* Extra Styling for Snippet */
#parent {
height: 150px;
background: #5548B0;
color: #fff;
padding: 10px;
font-family: sans-serif;
}
#child1 {
height: 50px;
width: 50px;
background: #6A67CE;
text-align: center;
vertical-align: middle;
line-height: 50px;
}<div id="parent">
<!-- Other elements here -->
<div id="child1">
1
</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>
div为上面的元素创建另一个容器#copyright.在版权之上添加一个新的div:
<div style="clear:both;"></div>
它将强制页脚在其他所有内容之下,就像使用相对定位(bottom:0px;)的情况一样.
你可以确实align的方框bottom不使用position:absolute，如果你知道height的#container使用文本对齐的特征inline-block元素。
在这里你可以看到它的实际效果。
这是代码：
#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;
}
小智 5
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>尽管此处提供的答案似乎都不适用于我的特定情况，但我遇到了提供此整洁解决方案的这篇文章：
#container {
display: table;
}
#copyright {
display: table-footer-group;
}
我发现这对于将响应式设计应用于移动显示非常有用，而不必重新排序网站的所有html代码，body而是将自身设置为表格。
请注意，只有第一个table-footer-group或table-header-group会这样渲染：如果有多个，则其他将被渲染为table-row-group。
小智 5
只需将元素子元素设置为 position: relative 然后将其移动到 top: 100%（即父级的 100% 高度）并通过转换粘贴到父级的底部：translateY(-100%)（即高度的 -100%孩子）。
好处
但仍然只是解决方法:(
.copyright{
position: relative;
top: 100%;
transform: translateY(-100%);
}
不要忘记旧浏览器的前缀。