當提供字體大小，系列和行高時div高度不正確

我正在嘗試在div上設置字體大小，系列和行高。然後我需要知道一些佈局的東西的正確的div的高度。然而，我得到的高度是錯誤的，並且滾動條出現在div的父項中可能是出於同樣的原因。下面的jsfiddle最能說明我的問題： http://jsfiddle.net/JYkAX/19/當提供字體大小，系列和行高時div高度不正確

下面是HTML：

<div class="separator"> 
    <div class="PleaseNoScrollBar"> 
     Some Text Here 
    </div> 
</div>

這裏是CSS：

.separator 
{ 
    background: gray; 
    display: block; 
    overflow: auto; 
} 

.PleaseNoScrollBar 
{ 
    font-family: cursive; 
    background: lightgray; 
    line-height: 32px; 
    font-size: 32px; 
    display: block; 
    opacity: 0.5; 
    vertical-align: top; 
}

以下的jQuery檢索div的外部高度（但它不正確）。

alert($(".PleaseNoScrollBar").outerHeight());

什麼是造成這種情況的任何想法？不幸的是，我需要能夠檢索div的實際外部高度，我不能只讓父div更大。

我應該提到，滾動條只出現在Chrome和IE中。在Firefox中，div可以通過拖動鼠標來滾動，但不會出現滾動條。

來源

2013-03-22 pulekies

你能澄清你實際上期待什麼嗎？我看着你提供的jsFiddle，JS警報彈出「32」，這正是你指定的。 – Steve 2013-03-22 17:01:43

適合我，警報'32' – chriz 2013-03-22 17:02:44

當然。父（'.separator'）是32px。孩子（'。PleaseNoScrollBar'）實際上大於32px，正如它使其父滾動的事實所示。 – pulekies 2013-03-22 17:22:30

從容器div中刪除overflow:auto聲明。

.separator 
{ 
    background: gray; 
    display: block; 
    overflow: auto; 
}

從W3C規範...

溢出：汽車「自動」價值的行爲是用戶代理相關的，但是應促使提供一個滾動機制溢出框。

來源：http://www.w3.org/TR/CSS21/visufx.html#overflow

這意味着編碼瀏覽器的人決定如何overflow:auto作品。如果將. separator div的高度設置爲34px，則滾動條將消失。

我建議從.separator div中刪除overflow:auto。

看看這個：http://jsfiddle.net/JYkAX/26/

如果容器div的高度設置爲任何大於子元素高度大不到兩個像素，滾動條顯示出來。我的猜測是，當聲明「overfow auto」時，瀏覽器添加添加到頂部和底部的1px邊框。

來源

2013-03-22 17:02:04 superUntitled

這將擺脫滾動條。不幸的是，我還需要'.PleaseNoScrollBar'div的實際高度。 – pulekies 2013-03-22 17:17:54

我需要知道爲什麼滾動條首先出現在父級上，因爲它應該是適應孩子的大小。 – pulekies 2013-03-22 17:50:23

看到我的編輯，我還沒有找到瀏覽器如何計算溢出高度的資源。 – superUntitled 2013-03-22 18:45:45

您正在查看滾動條，因爲您在.separator上設置了overflow:auto;。只要刪除它，你就不會再有滾動條了。

至於高度，警報功能檢索「32」，這是我認爲，div的正確高度。

來源

2013-03-22 17:03:14

'溢出：自動'應該只顯示一個滾動條，如果它的孩子比它大。由於我沒有在'.separator'上設置大小，它不應該滾動。 – pulekies 2013-03-22 17:16:18

當提供字體大小，系列和行高時div高度不正確

回答

相關問題