2

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

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

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

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

4

3 回答 3

1

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

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

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

于 2013-07-25T09:02:53.937 回答
1

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

于 2013-07-25T10:06:53.753 回答
0

这与您想要实现的内容类似，但演示的中心是

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

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

于 2013-07-25T08:57:11.823 回答