如何将div放置在其容器的底部?

徘徊边缘 提交于 2019-12-23 21:09:24

【推荐】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元素的文本对齐功能知道#containerheight ,则确实可以alignalign 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的底部...” ,而不是解决方案,但继续吧,人们正在这里寻找良好的解决方案,而这是一个!

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!