帶有內容溢出容器的div

Question

我有一個帶有三個子元素的<article>元素：頁眉，內容div和頁腳。 絕對按高度和寬度設置文章的位置，以使其很好地適合文章網格。 標頭具有一些可變的內容，例如文章標題，日期等，並且可以根據需要擴展。 通過對文章底部進行填充，頁腳絕對位於文章中留出的某些空間內。 但是，內容div拒絕很好地播放。

發生的事情是grid_content div僅占用了容納其內容所需的空間，卻在<article>元素中溢出。 我想算出要設置的明確高度，但是<article>高度和標題高度都是可變的，具體取決於它在網格中占據多少空間以及文章標題是什么。

是否有一些干凈的方法可以使div尊重其包含范圍，還是我需要做一些丑陋的JS hack使其保持原狀？

謝謝！

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集合。 一切都變得橢圓形了，盡管到目前為止，內容似乎已經被橢圓形切斷了。 我最好的猜測是那些容器中的不規則（通常是無效的）標記正在使它混亂。