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

【推荐】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

标签

div居中

position

div

absolute