div 内容溢出容器答案

【问题标题】：div with content overflowing containerdiv 内容溢出容器
【发布时间】：2012-07-19 04:53:05
【问题描述】：

我有一个

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

发生的情况是 grid_content div 只占用了容纳其内容所需的空间，同时溢出了

元素。我会想出一些明确的高度来设置它，但是

高度和标题高度都是可变的，这分别取决于它在网格中占用的空间数量以及文章标题是什么。

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

谢谢！

http://jsfiddle.net/j2fE4/

【问题讨论】：

使用jsfiddle.net 做一个小的工作示例。
据我所知，除了 CSS3 的盒子布局之外，目前没有唯一的 CSS 方法可以根据其兄弟元素的高度来限制元素的高度。目标平台有哪些？盒子布局是否可行，还是您也需要针对 IE7/8？
我担心的不是兄弟姐妹，但我只是不希望它占用的高度超过其容器中可用的高度。兄弟姐妹变得相关的唯一一点是它们也占用空间。
在
中，margin:10px是绝对定位的，会有影响吗？

标签： html css

【解决方案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 集合。一切都变成了省略号，尽管内容被省略号截断的点似乎还不是那么均匀。我最好的猜测是这些容器中的不规则（通常是无效的）标记正在搞乱它。

【讨论】：

感谢您发布您的答案，请确保在可能的情况下接受它。