【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>
鉴于以下HTML:
<div id="container"> <!-- Other elements here --> <div id="copyright"> Copyright Foo web designs </div> </div>
我希望#copyright
坚持#container
的底部。
不使用绝对定位就可以实现吗? 如果float属性支持'bottom'值,那似乎可以解决问题,但不幸的是,事实并非如此。
#1楼
另外,如果有使用position:absolute;
的规定position:absolute;
或position:relative;
,您总是可以尝试padding
父 div
或放置margin-top:x;
。 在大多数情况下,这不是一个很好的方法,但在某些情况下可能会派上用场。
#2楼
CSS中没有什么叫做float:bottom
东西。 最好的方法是在以下情况下使用定位:
position:absolute;
bottom:0;
#3楼
Div样式, position:absolute;bottom:5px;width:100%;
正在工作,但是需要更多向上滚动的情况。
window.onscroll = function() {
var v = document.getElementById("copyright");
v.style.position = "fixed";
v.style.bottom = "5px";
}
#4楼
如果使用inline-block
元素的文本对齐功能知道#container
的height
,则确实可以align
框align
bottom
而无需使用position:absolute
。
在这里您可以看到它的实际效果。
这是代码:
#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楼
只是因为根本没有提到它,所以在像您这样的情况下通常效果很好:
在容器div 之后放置版权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声明为height:100%
,用户需要向下滚动才能看到版权。 但是即使您仍然可以解决(例如, margin-top:-20px
当您的版权元素的高度为20px时)。
- 无绝对定位
- 无表格布局
- 没有疯狂的CSS,在所有其他浏览器中看起来都不一样(至少IE,您知道)
- 简单明了的格式
旁白:我知道OP要求一种解决方案“ ...坚持到'container'div的底部...” ,而不是解决方案,但继续吧,人们正在这里寻找良好的解决方案,而这是一个!
来源:oschina
链接:https://my.oschina.net/stackoom/blog/3146405