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与内容溢出容器

回答

相关问题