给定以下HTML:
< div id = "容器" > <！——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?
当前回答
是的，你可以在没有绝对定位的情况下做到这一点，也可以不使用表(这与标记有关)。
演示 这是经过测试的工作在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;
}
它有效地做了浮动:底部会做的事情，甚至解释了@Rick Reilly的回答中指出的问题!
其他回答
显示:w3schools.com
有位置的元素:绝对的;定位相对于 最近的定位祖先(而不是相对于 视口，像固定)。
所以你需要将父元素定位为相对或绝对元素，等等，并将所需元素定位为绝对元素，然后将bottom设置为0。
纯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>
下面是一种方法，目的是使具有已知高度和宽度(至少大约)的元素浮到右边并停留在底部，同时作为其他元素的内联元素。它集中在右下角，因为您可以通过其他方法轻松地将它放置在任何其他角落。
我需要制作一个导航栏，在右下角有实际的链接和随机的兄弟元素，同时确保栏本身适当拉伸，而不破坏布局。我使用了一个“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>
针对此特定场景的解决方案:
将inner放在父元素的底部。父节点的高度由它的“最高”兄弟节点的高度设置
设置:
我有一行与多个<div class="容器"> 这些<div class="container">在另一个<div class="supercontainer">中彼此相邻 每个<div class="container">都有3个内部div相互重叠:<div class="title">， <div class="content">， <div class="footer">
期望的结果:
所有<div class="container">的高度相同。高度没有在px中定义，它将是其中“最高”的高度。 <div class="title">应该在<div class="container">的顶部 <div class="content">应该放在<div class="title">下面 <div class="footer">应该放在<div class="container">的底部，而不与前面的内容重叠
这是当前状态:https://codepen.io/xavier-atero/pen/ExvWQww
.supercontainer { border: solid 1px black; display: flex; } .container, .other-container { position: relative; border: solid 1px red; width: 200px; margin: 10px; } .title { margin: 10px; border: solid 1px blue; } .content { margin: 10px; border: solid 1px cyan; } .footer { margin: 10px; background: lime; } <body> <div class="supercontainer"> <div class="container"> <div class="title"> This part represents the title and it is placed on top </div> <div class="content"> This one represents the body and it is placed below the title </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> <div class="other-container"> <div class="title"> This part represents the title and it is placed on top. </div> <div class="content"> This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged. </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> </div> </body>
__________解决方案与FLEXBOX __________
这是结果:https://codepen.io/xavier-atero/pen/MWvpBMz
.supercontainer { border: solid 1px black; display: flex; } .container, .other-container { position: relative; border: solid 1px red; width: 200px; margin: 10px; display: flex; flex-direction: column; } .title { margin: 10px; border: solid 1px blue; } .content { margin: 10px; border: solid 1px cyan; } .footer { margin: 10px; background: lime; margin-top: auto; border: solid 1px fuchsia; } <body> <div class="supercontainer"> <div class="container"> <div class="title"> This part represents the title and it is placed on top </div> <div class="content"> This one represents the body and it is placed below the title </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> <div class="other-container"> <div class="title"> This part represents the title and it is placed on top. </div> <div class="content"> This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged. </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> </div> </body>
__________带有TABLE-ROW __________的解决方案
这是结果:https://codepen.io/xavier-atero/pen/rNzyKJm
.supercontainer { border: solid 1px black; display: flex; } .container, .other-container { position: relative; border: solid 1px red; width: 200px; margin: 10px; border-collapse:collapse; display : table; } .title { margin: 10px; border: solid 1px blue; } .content { margin: 10px; border: solid 1px cyan; } .footer { margin: 10px; background: lime; border: solid 1px fuchsia; display: table-row; vertical-align: bottom; height: 1px; } <body> <div class="supercontainer"> <div class="container"> <div class="title"> This part represents the title and it is placed on top </div> <div class="content"> This one represents the body and it is placed below the title </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> <div class="other-container"> <div class="title"> This part represents the title and it is placed on top. </div> <div class="content"> This one represents the body and it is placed below the title. This one is longer than the first one to stretch the parent div. Since it is longer, the footers of the two containers are not alinged. </div> <div class="footer"> And this one is the footer. It should always be at the bottom of the container </div> </div> </div> </body>
#{容器宽度:100%;浮:左;位置:相对;} #{版权:绝对;底部:0 px;左:0 px;背景:# F00;宽度:100%;} #容器{背景:灰色;身高:100 px;} < div id = "容器" > <！——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
< div id = "容器" > <！——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换，锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言，并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度，而不是整个元素的宽度，使用CSS?
