问题:给定一个具有固定高度的 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;
}
}
}
}
}
我可以想到这样一种场景,在浮动或位置:绝对元素的情况下,子对象的边界框比它自己的子对象小得多,并且需要修复所有子对象的递归调用,但除了在这种情况下,这应该根据子元素的大小为您提供任何元素的最小宽度/高度。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)