Question

最后更新！

我的容器面板有一组注释。每个注释都有不同的长度，因此容器的高度应该是动态的，这可以通过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()返回实际高度值的大约一半。下图显示了它应该是什么样子：

enter image description here

但它看起来像是：

enter image description here

我尝试将功能标题更改为$(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标签和带有Image的commandlink。当我删除br标记图像时，timeago写在同一行的注释之后，在这种情况下，height（）被正确计算。

但每当我使用<br/>或<p/>这意味着有新行时，height()函数就会被破坏。但我不知道如何解决？

Answer 1

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

使用<br/>标记进行样式设计时，这是一个巨大而有趣的错误。我正在检查ajax回调参数，几乎尝试了所有可能通过javascript获得正确的高度，但没有工作。最后，br标记模仿我并试图教导一些东西：

只要你不熟悉基础知识，你对使用准备好的图书馆的深度不是很重要！

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

jQuery height（）返回实际高度值的大约一半

1 个答案: