0

我有一个带有三个子元素的 <article> 元素：页眉、内容 div 和页脚。文章绝对定位，高度和宽度设置，因此它很好地适合文章网格。header 有一些可变的内容，如文章标题、日期等，可以根据需要进行扩展。通过填充文章底部，页脚绝对定位在文章中留出的一些空间内。然而，内容 div 拒绝很好地播放。

发生的事情是 grid_content div 只占用了容纳其内容所需的空间，同时溢出了 <article> 元素。我会想出一些明确的高度来设置它，但是 <article> 高度和标题高度都是可变的，这分别取决于它在网格中占用的空间数量和文章标题是什么。

是否有一些干净的方法可以让 div 尊重它的包容性，或者我需要做一些丑陋的 JS 黑客来让它保持原样吗？

谢谢！

http://jsfiddle.net/j2fE4/

4

1 回答 1

0

好的，所以我确实设法解决了这个问题，但解决方案是涉及 JavaScript 的两部分交易。

首先，我使用了一些自定义 JavaScript 来计算 .grid_content 元素的适当高度，粘贴在这里以供参考。该解决方案不适用于其他项目，但应该说明思考过程。

function resizeContentElements() {
    $('div.grid_content').each(function(i, element){
        var $element = $(element);

        var parentHeight = $element.parent().height();
        var elementPadding = parseFloat($element.css('padding-top')) + parseFloat($element.css('padding-bottom'));
        var siblingSpace = $element.prev().height() + parseFloat($element.prev().css('padding-top')) + parseFloat($element.prev().css('padding-bottom'));

        $element.height(parentHeight - siblingSpace - elementPadding);
    });
}

之后，我抓取了http://dotdotdot.frebsite.nl/并将其应用于 div.grid_element 集合。一切都变成了省略号，尽管内容被省略号截断的点似乎还不是那么均匀。我最好的猜测是这些容器中的不规则（并且通常是无效的）标记正在搞乱它。

于 2012-07-18T20:43:06.763 回答