Question

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

正在发生的事情是grid_content div只占用了容纳其内容所需的大量空间，溢出了＆lt; article＆gt;元素，因为它这样做。我想出一些明确的高度来设置它，但是＆lt; article＆gt;高度和标题高度是可变的，具体取决于它在网格中占用的空间数和文章标题的内容。

是否有一些干净的方法让div尊重其遏制，或者我是否需要做一些丑陋的JS黑客才能让它留下来？

谢谢！

http://jsfiddle.net/j2fE4/

Answer 1

好的，所以我设法解决了这个问题，但解决方案是涉及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集合。一切都得到了省略号，尽管内容被椭圆切断的点似乎并不那么均匀。我最好的猜测是，这些容器中的不规则（通常是无效的）标记正在弄乱它。

内容溢出容器的div

1 个答案: