jQuery height（）返回大約一半的實際高度值

更新結束！jQuery height（）返回大約一半的實際高度值

我有容器面板，它有一組評論。每個評論有不同的長度，所以容器的高度應該是動態的，這可以通過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的位置（）函數插入的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()函數已損壞。但我不知道如何解決？

來源

2013-04-14 Ömer Faruk Almalı

請提供相關的HTML和CSS – Ejaz

您開放撬動的jQuery UI的位置工具？ http://api.jqueryui.com/position/ –

@Ejay好吧，我發了它，但我使用JSF，所以也許生成的HTML可以更有幫助。此外，沒有關於CSS浮動。 –

經過研究約<br/>標籤發現它根本沒有高度。它只是強行結束這一行，就這些。這就是爲什麼所有js函數都在計算高度錯誤的原因，因爲它們不關心br標籤。

與<br/>標籤形成一個巨大而有趣的錯誤樣式。我正在檢查Ajax回調參數，幾乎嘗試了所有可能性來通過javascript獲得正確的高度，但沒有奏效。最後，br標記模擬了我並試圖教導一些東西：

只要你不瞭解基礎知識，多少深入使用準備好的庫並不重要！

還有一件事，根本原因可能是<li/>標籤爲好，如果你有2行，確保您有2個<li/>標籤

來源

2013-04-14 20:57:55

jQuery height（）返回大約一半的實際高度值

回答

相關問題