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

Question

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

例子 求DIV A的最大/最小高度

回答

最小值:150 像素

最大:275px

* {
  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 错误。这是一个更新的 fiddle 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 的最大/最小高度。

这是我提出的用于确定内部内容的最大/最小高度的算法。我对不太复杂的解决方案持开放态度。

Answer 1

如果我正确理解你的问题，这行得通吗？

// - 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;
                }
            }
        }
    }
}

我可以想到一个场景，在 float 或position:absolute元素的情况下，子对象的边界框看起来比它自己的子对象小，并且要解决需要对所有子对象进行递归调用的问题，但除了这种情况，这应该根据 child 的尺寸为您提供任何元素的最小宽度/高度。