给定以下HTML:
< div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?
给定以下HTML:
< div id = "容器" > <!——这里的其他元素——> < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >
我想把#copyright贴在#container的底部。我能在不使用绝对定位的情况下实现这一点吗?
当前回答
代码依赖链接在这里。
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>
其他回答
如果你不知道子块的高度:
#{母公司 背景:绿色; 宽度:200 px; 身高:200 px; 显示:表格单元; vertical-align:底部; } .child { 背景:红色; vertical-align:底部; } < div id = "父" > < div class = "孩子" >的孩子 < / div > < / div >
http://jsbin.com/ULUXIFon/3/edit
如果你知道子块的高度,添加子块,然后添加padding-top/margin-top:
#{母公司 背景:绿色; 宽度:200 px; 身高:130 px; padding-top: 70 px; } .child { 背景:红色; vertical-align: 底; 身高:130 px; } < div id = "父" > < div class = "孩子" >的孩子 < / 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>
使用translateY和top属性
只需将子元素设置为position: relative,然后将其移动到顶部:100%(这是父元素的100%高度),并通过transform: translateY(-100%)(这是子元素高度的-100%)坚持到父元素的底部。
好处
您不需要从页面流中获取元素 它是动态的
但仍然需要变通:(
.copyright{
position: relative;
top: 100%;
transform: translateY(-100%);
}
不要忘记旧浏览器的前缀。
CSS中没有所谓的float:bottom。最好的方法是在这种情况下使用定位:
position:absolute;
bottom:0;
你可以通过为顶部的内容分配可用空间来使用网格:
#{容器 显示:网格; Grid-template-rows: 1fr auto; 高度:10眼动;/*或100%或任何*/ } < div id = "容器" > 这是随机内容。 < div id =“版权”> 版权所有Foo网页设计 < / div > < / div >