javascript - 将元素放置在高度未知的 float div 的底部

Question

我目前正在尝试以一种始终位于其父元素底部的方式定位元素。这里的特别之处在于高度或宽度都未知。如果可能的话，我想在没有表格的情况下执行此操作(我的上级反对使用这些表格。以一种非常虔诚的方式)。

我尝试了在父级上使用 position:relative 和 position:absolute; 的方法； bottom:0; 在我想放在底部的盒子上。但是，这会导致框与父 div 的其他内容重叠，因为绝对定位会导致父忽略定位元素的高度。一些 JavaScript 用于将 float div 的高度彼此对齐。但是禁用的 JavaScript 不应完全破坏布局(如:导致内容重叠或破坏页面的“流动”)。

这是我的标记的确切结构的 fiddle :http://jsfiddle.net/vbeC2/27/

我确实阅读了关于 SO 的“ float :底部”问题，但没有一个答案真正解决了我的问题，因此出现了新问题。

Answer 1

这不是最干净的解决方案，但由于您已经使用 maxHeight 位来计算尺寸，我只是添加了第二个每个循环来检查底部的最大高度，并添加了它，以便 相对、绝对定位都可以。

http://jsfiddle.net/robsterlini/svcGB/或 http://codepen.io/robsterlini/pen/BcDyt

编辑 当您调整浏览器大小时它不会工作，但您可以添加一个重新计算它的调整大小事件，并且您需要考虑创建一些无 javascript 的回退，或者使用 modernizr，或者只是一些简单的