将元素放置在高度未知的浮动 div 的底部答案

【问题标题】：Position an element at the bottom of a floating div with unknown height将元素放置在高度未知的浮动 div 的底部
【发布时间】：2013-07-25 01:32:37
【问题描述】：

我目前正在尝试以始终位于其父元素底部的方式定位元素。这里的特别之处在于没有一个高度或宽度是已知的。如果可能的话，我想在没有桌子的情况下这样做（我的上级反对使用这些。以非常虔诚的方式）。

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

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

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

【问题讨论】：

标签： javascript html css positioning vertical-alignment

【解决方案1】：

这与您想要实现的内容相似，但演示以

为中心

http://css-tricks.com/centering-in-the-unknown/

您应该使用相同的技巧：使用 css ::after/::before 伪类在父 div 中设置页脚内容

【讨论】：

我已经尝试过调整该解决方案，但它似乎破坏了布局：jsfiddle.net/vbeC2/52 我也不知道为什么这会起作用（即使想要垂直居中一个盒子）。我是不是做错了什么？

【解决方案2】：

这不是最干净的解决方案，但由于您已经使用 maxHeight 位来计算尺寸，我只是在每个循环中添加了第二个来检查底部的最大高度，然后添加它，以便 @987654323 @ 会起作用。

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

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

【讨论】：

那么最后，没有javascript就无法完成？
据我所知，但这不是世界末日。大多数人都有它，如果它经过仔细编码，它可以是轻量级的，并且非常有用。只要确保你有某种 noscript 后退，你会没事的！

【解决方案3】：

请在此处找到工作演示：JS Enabled

修改jquery逻辑计算容器最大高度的高度如下图：

$(document).ready(function(){
    //Set the height of the columns to the highest value of all columns
    var maxHeight = 0;
    $(".same-height").each(function(){
        var k = $(this).children('.headline').innerHeight() + $(this).children('.description').innerHeight()+$(this).children('.bottom').innerHeight();
        maxHeight = Math.max(maxHeight,k);
    });

    $(".same-height").css({"height" : maxHeight});
});

如果 JavaScript 被禁用，那么您应该应用不同的样式，如演示中所示： JS Disabled

【讨论】：