计算 DIV 元素的最大/最小高度

问题：给定一个具有固定高度的 DIV 元素，其中包含未知数量的子元素，这些子元素的大小相对于其高度，计算 DIV 可以调整大小的最大/最小高度，而不违反其子元素的任何最大/最小值元素。

Example求 DIV A 的最大/最小高度

Answer

最小：150 像素

最大：275 像素

* {
  box-sizing: border-box;
}
.border {
  border-style: solid;
  border-width: 1px 1px 1px 1px;
}
.A {
  height: 200px;
  width: 200px;
}
.B {
  float: left;
  width: 50%;
  height: 75%;
  min-height: 125px;
  max-height: 225px;
  background: yellow;
}
.C {
  float: left;
  width: 50%;
  height: 75%;
  min-height: 100px;
  max-height: 250px;
  background: green;
}
.D{
  float: left;
  width: 100%;
  height: 25%;
  min-height: 25px;
  max-height: 50px;
  background: blue;
}

<div class="A border">
  <div class="B border">
    B
  </div>
  <div class="C border">
    C
  </div>
  <div class="D border">
    D
  </div>
</div>

附加信息：我目前尝试使用一种算法来遍历 DIV 的 DOM 树，并使用元素偏移量创建一个表示元素空间位置的对象图。下面是一个基本算法，用于检查元素的空间关系，允许边缘之间 10 像素的距离被视为“接触”。

允许使用 jQuery 和其他库，只要它们是开源的。

var _isContentRoot = function(a,b){
    var aRect = a.innerRect;
    var bRect = b.outerRect;
    //Check if child element is a root node
    return Math.abs(aRect.top - bRect.top) <= 10;
}

var _isLayoutSibling = function(a,b){
    var aRect = a.outerRect;
    var bRect = b.outerRect;

    // If element X has a boundary that intersects element Y, and
    // element X is located above element Y, element Y is a child node of
    // element X
    if(Math.abs(aRect.bottom - bRect.top) <= 10) {
        if (aRect.left <= bRect.left && aRect.right >= bRect.left ||
            aRect.left <= bRect.right && aRect.right >= bRect.right ||
            aRect.left >= bRect.left && aRect.right <= bRect.right ||
            aRect.left <= bRect.left && aRect.right >= bRect.right) {

            return true;
        }
    }
    return false;
}

编辑：修复了 CSS 错误。这是更新的小提琴http://jsfiddle.net/zqnscmo2/ http://jsfiddle.net/zqnscmo2/

编辑 2：尝试将其更多地视为 CSS/HTML 问题空间中的图形问题。想象一下 CSS 和 HTML 用于描述一个图，其中每个 DIV 都是一个顶点。两个顶点之间存在一条边

1.) 如果 HTML 元素的边界 rectA.top ≈ rectB.top 或 2.) 如果边界 rectA.bottom ≈ rectB.top，则存在边缘

每个顶点都有两个互斥的边集，集 A 包含满足条件 1 的所有边。集 B 包含满足条件 2 的所有边。因此，您可以遍历图并找到最小和最大路径，这应该是 PARENT DIV 的最大值/最小高度。

这是我提出的用于确定内部内容的最大/最小高度的算法。我非常愿意接受不太复杂的解决方案。

如果我正确理解你的问题，这会起作用吗？

// - I use two support functions that can probably be found in other JSes frameworks, and they're down below.
function calculateMySizes(someElement) {
    var childDiv = findChild(someElement, "DIV");

    var totalWidth = 0;
    var totalHeight = 0;
    var maxWidth = 0;       
    var maxHeight = 0;       

    do
    {
        if(childDiv.offsetLeft > maxWidth) {
            maxWidth = childDiv.offsetLeft;
            totalWidth += childDiv.offsetLeft;
        }

        if(childDiv.offsetTop > maxHeight) {
            maxHeight = childDiv.offsetTop;
            totalHeight += childDiv.offsetTop;
        }            
    }
    while (childDiv = nextElement(childDiv));

    alert("object's current width is: " + totalWidth + " and it's child's largest width is: " + maxWidth);
    alert("object's current height is: " + totalHeight + " and it's child's largest height is: " + maxHeight);
}

// - Returns the next Element of object
function nextElement(object) {
    var nextObject = object;
    while (nextObject = nextObject.nextSibling) {
        if (nextObject.nodeType == 1) {
            return nextObject;
        }
    }
    return nextObject;
}

// - Returns the first child of elementName found
function findChild(object, elementName) {
    for (var i = 0; i < object.childNodes.length; i++) {
        if (object.childNodes[i].nodeType == 1) {
            if (object.childNodes[i].nodeName.toUpperCase() == childName) {
                return object;
            }

            if (object.childNodes[i].hasChildNodes()) {
                var child = findChild(object.childNodes[i], childName, countMatch);
                if (child) {
                    return child;
                }
            }
        }
    }
}

我可以想到这样一种场景，在浮动或位置：绝对元素的情况下，子对象的边界框比它自己的子对象小得多，并且需要修复所有子对象的递归调用，但除了在这种情况下，这应该根据子元素的大小为您提供任何元素的最小宽度/高度。