给定以下HTML:
< div id = "容器" > <！——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?
当前回答
纯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>
其他回答
CSS网格
由于CSS Grid的使用正在增加，我想建议align-self到网格容器内的元素。
Align-self可以包含任何值:end, self-end, flex-end，如下例所示。
#{母公司 显示:网格; ｝ # child1 { align-self:结束; ｝ /*额外的样式片段*/ #{母公司 身高:150 px; 背景:# 5548 b0; 颜色:# fff; 填充:10 px; 字体类型:无衬线; ｝ # child1 { 高度:50 px; 宽度:50 px; 背景:# 6 a67ce; text-align:中心; vertical-align:中间; 行高:50 px; ｝ < div id = "父" > <！——这里的其他元素——> " child1 " < div id = > 1 < / div > < / div >
可能不是。
指定位置:相对于#容器，然后position:绝对;底部:0;#版权。
#{容器 位置:相对; ｝ #{版权 位置:绝对的; 底部:0; ｝ < div id = "容器" > <！——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
对于容器中只有一个子div的容器，可以使用表格单元格和垂直对齐方法，这种方法可以可靠地将单个div定位在父div的底部。
注意，使用table-footer-group作为前面提到的其他答案将破坏父表的高度计算。
#{容器 显示:表; 宽度:100%; 身高:200 px; ｝ #{项 显示:表格单元; vertical-align:底部; ｝ < div id = "容器" > <div id="item">单个底部项目</div> < / div >
为#copyright上面的元素创建另一个容器div。就在版权上面添加一个新的div: < div风格= "明确:;" > < / div > 它将强制页脚位于其他所有内容的下面，就像使用相对定位(bottom:0px;)的情况一样。
不要在底部使用"position:absolute"作为粘性页脚。那么你可以这样做:
html, body { height: 100%; margin: 0; } .wrapper { min-height: 100%; /* Equal to height of footer */ /* But also accounting for potential margin-bottom of last child */ margin-bottom: -50px; } .footer{ background: #000; text-align: center; color: #fff; } .footer, .push { height: 50px; } <html> <body> <!--HTML Code--> <div class="wrapper"> <div class="content">content</div> <div class="push"></div> </div> <footer class="footer">test</footer> </body> </html>
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
