Question

我正在使用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>';
                }
            }
        }
    }

提前致谢！

Answer 1

问题是什么？

如果你添加一个元素的高度，你的循环结尾的$ y变量包含总高度，在你的情况下是68像素（4.6875em）

只需将其打印出来，例如进入javascript变量。

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

Answer 2

最底部定位元素的

position()和outerHeight()表示容器的高度;只需使用height()或css('min-height: …')设置它。

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

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

2 个答案: