1

最后更新！

我有一组评论的容器面板。每个评论都有不同的长度，所以容器的高度应该是动态的，这可以通过height:auto. 为了能够输入新的评论，用户应该单击一个按钮，输入文本将呈现在评论面板下。所以我编写了一个 js 函数，它获取面板的高度并将其设置为输入文本的位置顶部值，即：

var commentPanelStr = 'dataTableFormHM' + ':dataTableHM:' + rowIndex + ':commentPanel';
var commentPanel = $(document.getElementById(commentPanelStr));
commentPanel.css({
    "height":"auto",
    "top":commentPanelTopValue
});

var commentInputPanelStr = 'dataTableFormHM' + ':dataTableHM:' + rowIndex + ':commentInputPanel';
var commentInputPanel = $(document.getElementById(commentInputPanelStr));

var y = parseInt(commentPanel.height())+commentPanelTopValue;
commentInputPanel.css("top", y);

关于这个功能的问题是；commentPanel.height()返回大约一半的实际高度值。下图显示了它的外观：

在此处输入图像描述

但它看起来像：

在此处输入图像描述

我试图将函数标题更改$(window).load()为 $(document).ready(). 函数也outerHeight() $(elem).css('height');$(elem)[0].height; $(elem)[0].innerHeight; $(elem)[0].clientHeight;返回错误的值。

jQuery position() 函数还将 inputText 插入到评论面板的中间，这是评论面板的大约一半，代码如下：

commentInputPanel.position({my:"bottom",at:"bottom",of:commentPanel});

我认为 jQuery 函数无法获得确切的值，height:auto但问题是为什么？

相关xhtml代码：

<p:panel id="commentPanel" style="width:353px; height:34px;position:absolute;left:370px;top:149px;"
                         styleClass="statusComment">
                    <ui:param name="max" value="#{Status.numOfCommentsShown}"/>
                    <ui:repeat var="Comment" value="#{Status.commentListOfStatus}" varStatus="statusVar">
                        <ui:fragment rendered="#{statusVar.index lt max}">
                            <li>
                                <div class="wrapper" id="wrapperDiv" style="word-wrap: break-word;width: 335px;">
                                    <h:link value="#{Comment.commentAuthorName}: " id="goToProfileWithAuthorName"
                                            outcome="/profile.xhtml" type="submit"
                                            style="text-decoration:none;font-family:arial;font-weight:bold;font-size: 11px;color: rgb(120,120,159);">
                                        <f:param name="userId" value="#{Comment.comauthorId}"/>
                                    </h:link>

                                    <h:outputText id="commentText" value="#{Comment.commentText}"
                                                  style="font-family:arial;font-size: 11px;color: rgb(77,77,103);"></h:outputText>
                                    <br/>
                                    <abbr class="timeago" title="#{Comment.commentDate}"
                                          style="color: #778899;font-size: 10px;">
                                    </abbr>
                                    <p:commandLink styleClass="deleteCommentButton" style="display:none;">
                                        <p:graphicImage value="/images/smallCancel.png" alt="delete"
                                                        style="outline: none; border:none"/>
                                    </p:commandLink>
                                </div>
                            </li>
                        </ui:fragment>
                    </ui:repeat>
                </p:panel>

感谢您的帮助。

更新！

我想我找到了原因！正如在 xhtml 中看到的那样，我有 br 标记和带有图像的命令链接。当我删除该 br 标记图像并且 timeago 写在同一行中的注释之后，在这种情况下 height() 计算正确。

但是每当我使用 a <br/>or<p/>表示有新行时，height()函数就会损坏。但我不知道如何解决？

4

1 回答 1

1

在研究了<br/>标签后发现它根本没有高度。它只是强行结束线路，仅此而已。这就是为什么所有 js 函数都计算高度错误的原因，因为它们不关心 br 标签。

这是一个巨大且有点有趣的错误样式<br/>标签。我正在检查ajax回调参数，几乎尝试了所有通过javascript获得正确高度的可能性，但没有奏效。最后， br 标签模仿我并试图教一些东西：

只要您不太了解基础知识，您对使用准备好的库有多深入并不重要！

还有一件事，根本原因也可以是<li/>标签，如果您有 2 行，请确保您有 2 个<li/>标签

于 2013-04-14T20:57:55.290 回答