div與內容溢出容器

我有一個<文章>元素與三個孩子：標題，內容div和頁腳。該文章絕對定位高度和寬度設置，以便它很好地適合文章的網格。標題包含一些可變內容，例如文章標題，日期等，並且可以根據需要進行擴展。通過填充文章底部，頁腳完全位於文章的某個空間內。內容div，但是，拒絕發揮很好。div與內容溢出容器

發生了什麼事情是grid_content div只是佔用了很多空間來容納它的內容，因爲它滿足了<文章>的元素。我會找出一些明確的高度來設置它，但<文章>高度和標題高度是可變的，這取決於它在網格中佔用了多少空間以及文章標題是什麼。

有沒有一些乾淨的方式讓div尊重它的遏制，還是我需要做一些醜陋的JS黑客來讓它保持放？

謝謝！

http://jsfiddle.net/j2fE4/

來源

2012-07-17 Michael Cordingley

使用[jsfiddle.net]（http://jsfiddle.net）做一個小的工作示例。 – 2012-07-17 17:30:44

據我所知，目前沒有CSS的唯一方法來限制基於它的兄弟姐妹的高度而不是CSS3的盒子佈局的高度。什麼是目標平臺？盒子佈局是否可行或您是否需要瞄準IE7/8？ – 2012-07-17 17:37:37

http://jsfiddle.net/j2fE4/ – 2012-07-17 18:24:08

好了，所以我還是設法解決這個問題，但解決方案是一個涉及的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-18 20:43:06

非常感謝您發佈您的答案，請確保在您能夠接受時接受答案。 – Wex 2012-07-18 20:53:52

div與內容溢出容器

回答

相關問題