Question

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

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

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

我确实读过关于SO的“浮动：底部”问题，但没有一个答案真正解决了我的问题，因此是新问题。

Answer 1

这不是最干净的解决方案，但由于您已经使用maxHeight位来计算大小，我只是添加了第二个每个循环以检查底部的最大高度，并添加它，以便{{{ 1}}会起作用。

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

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

Answer 2

请在此处找到工作演示：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

Answer 3

这类似于你想要实现的东西，但是演示集中了

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

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

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

3 个答案: