Javascript根据多个绝对定位的子元素的高度调整容器大小答案

【问题标题】：Javascript to resize container based on height of multiple absolutely positioned child elementsJavascript根据多个绝对定位的子元素的高度调整容器大小
【发布时间】：2013-10-02 20:31:11
【问题描述】：

我正在使用 js-graph.it (http://js-graph-it.sourceforge.net/index.html) 创建由应用程序的最终用户创建的工作流的可视化表示。我有一个灯箱（Fancybox）弹出窗口来显示流程图并且一切正常。但是，这些步骤都是绝对定位的元素，因此我无法设置容器的高度，因为可能有任意数量的元素行。

所以我的问题是，有没有办法计算绝对定位元素的总高度，然后使用该值来更新容器元素的高度？

我意识到相对定位/浮动会更好，但不幸的是，这不是 js-graph-it 的选项，因为它需要绝对定位来绘制连接箭头。

这是我正在处理的 JSFiddle：http://jsfiddle.net/db3ef/1/，由于需要代码，所有 HTML 都是由 PHP 创建的，所以我将其设置为连续显示 4 个项目并计算绝对定位：

    <?php
    if ($steplist) {
        $oddcounter = 0;
        $evencounter = false;
        $row = 1;
        foreach ($steplist as $step) {
            if (is_int($oddcounter)) {
                $oddcounter++;
                $counter = $oddcounter;
            }
            else {
                $evencounter--;
                $counter = $evencounter;
            }
            if ((is_int($oddcounter) && $oddcounter > 0 && ($oddcounter % 5 == 0)) || (is_int($evencounter) && ($evencounter == 0))) {
                $row++;
                if ($row & 1) { // Odd row
                    $evencounter = false;
                    $oddcounter = 1;
                    $counter = $oddcounter;
                }
                else { // Even row
                    $evencounter = 4;
                    $oddcounter = false;
                    $counter = $evencounter;
                }
            }
            $x = ($counter - 1) * 280;
            $y = ($row - 1) * 100;
            // Set status classes
            switch ($step['status']) {
                case 1:
                    $statusclass = ' active';
                    break;
                case 2:
                    $statusclass = ' complete';
                    break;
                case 0:
                    $statusclass = ' pending';
                    break;
            }
            $map .= '<div class="block draggable' . $statusclass . '" id="step' . $step['pgsid'] . '" style="left:' . $x . 'px; top:' . $y . 'px;"><p><strong>' . stripslashes(neat_trim($step['stepname'], 50, '...')) . '</strong><br />';
            $map .= $step['assignee'] . '<br />';
            ($step['enddate'] != '') ? $map .= date('n/j/Y g:ia', strtotime($step['enddate'])) . '</p></div>' : $map .= '</p></div>';
            if (isset($step['links'][0])) {
                foreach ($step['links'] as $connection) {
                    $connectors .= '<div class="connector step' . $step['pgsid'] . ' step' . $connection . '">
                        <img src="/images/arrow.png" class="connector-end">
                        </div>';
                }
            }
        }
    }

提前致谢！

【问题讨论】：

标签： javascript php graph css-position flowchart

【解决方案1】：

有什么问题？

如果您添加一个元素的高度，则循环末尾的 $y 变量包含总高度，在您的情况下为 68pixel (4.6875em)

只需打印出来，例如到一个 javascript 变量中。

echo '<script type="text/javascript">totalHeight = '.($y+68).';</script>';

【讨论】：

我明白了——一旦计算了总数，我该如何使用该变量来调整画布 div 的大小？
使用 jQuery $("#map").height(totalHeight);没有 jQuery，例如document.getElementById("map").style.height = totalHeight + "px";
啊，完美！非常感谢！
欢迎 :-) 赏金。
对不起，我以为当我接受答案时它会自动奖励赏金。刚刚收到警报电子邮件——现在一切就绪！

【解决方案2】：

position() 和outerHeight() 对于最底部的定位元素意味着容器的高度；只需使用height() 或css('min-height: …') 设置即可。

在 PHP 中输出总和可能有效，但请记住 PHP 对客户端上实际显示的内容“视而不见”；也许让 PHP “猜测”高度，然后在 javascript 中完成。

【讨论】：