即使未設置高度，也會出現垂直滾動條

如果以html格式保存下面的文件，則會顯示垂直滾動條。由於高度爲即使未設置高度，也會出現垂直滾動條

<div class="tabData" id="tab3data" style="visibility: visible;">

未設置，是不是應該自動展開以適合所有內容？

<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <style type="text/css"> 
     .tabData 
     { 
      width: 100%; 
      background-color: Yellow; 
      overflow: auto; 
     } 
    </style> 
</head> 
<body> 
    <div class="tabData"> 
     <div style="height: 390px; background-color: Green;"> 
      <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> 
      </div> 
     Hello 
    </div> 
</body>

來源

2013-04-10 Foo

在Firefox中使用螢火蟲工具 – 2013-04-10 15:12:42

嘗試它，除了建議檢查是否設置了overflow：auto（如果是的話，設置爲overflow：visible），我不認爲任何人都可以在沒有看到代碼的情況下提供幫助 – hexblot 2013-04-10 15:13:04

或者使用通過按F12在IE或Chrome中開發人員工具。這將使您能夠進行調試 – davidb 2013-04-10 15:13:34

你有一個父容器div.tabData其高度由子元素的總高度確定，其中有兩個，內部<div>和包含單詞「Hello」的匿名塊。

內部div的高度爲390px，「Hello」行佔用大約1.5em。因此，具有黃色背景的父元素就足夠大，可以包含390px內部div和一行文本。

如果將足夠的內容添加到內部div，文本最終會流到具有綠色背景的內部div之外。這是默認情況下瀏覽器的工作原理，他們試圖使文本無論如何都可見。

但是，就父元素而言，它具有基於390px + 1行高度的文本的正確高度。當文本溢出固定高度的子元素時，瀏覽器不會重新計算塊元素的高度。

如果您繼續向內部div添加更多文本，它將開始流向父元素中的任何文本，並且最終會溢出父容器並導致出現垂直滾動條，因爲您設置了overflow: auto父元素。

另一方面，你是不是固定內部div的高度，你會得到預期的行爲，內部div展開來包含其所有內容，並且父div展開以將內部div和一行文字。

例

如果您嘗試以下小提琴，http://jsfiddle.net/audetwebdesign/s3bnJ/，並調整水平寬度，你可以看到從內DIV流動文本從內股利和到父DIV，最終，你會看到滾動條出現。

來源

2013-04-10 19:22:00

-1

設定溢出股利：無;

UPDATING：

取決於如何div的內容被證實可以試試這個：溢出：隱藏;.例如，如果滾動條出現，但您不必使用它來查看內容，則「隱藏」參數將解決問題。

來源

2013-04-10 15:34:45

沒有'overflow：none'這樣的東西。 – BoltClock 2013-04-10 16:10:57

對不起，這是一個類型錯誤。我的意思是溢出：隱藏;解決問題。 – 2013-04-10 16:45:48

你可以編輯你的答案... – SQLMason 2013-04-10 17:48:02

由於您已經意識到基於瀏覽器的開發人員工具，因此我會假設您已經檢查過有問題的div。我假設在檢查後您查看了爲該div明確定義的樣式。我還假設你也檢查了可能影響該div的繼承樣式。

難道是所討論的div不是具有滾動條的元素嗎？通過這個我的意思是，也許你有另一個元素纏繞在生產滾動條的div上。或者也許在生成滾動條的div內有一個元素。換句話說，問題實際上可能不是所討論的div。如前所述，除非我們看到實際的代碼，否則這對其他人來說很難提供幫助。如果你只是想擺脫滾動條，你可以按照@Adriano的建議做，並將溢出設置爲無。

來源

2013-04-10 16:08:51 SunSparc

你的.tabData內div有一個內嵌height: 390px;及其內容不適合在這樣的高度，overflow: auto;在你的CSS父（tabData）使它呈現垂直滾動出於這個原因。

這是一個修復你，如果你想保持當前的結構：
修復：http://jsfiddle.net/QvMfJ/

來源

2013-04-10 18:49:18 Arbel

爲什麼scroll沒有出現在綠色區域？爲什麼它出現在沒有設置高度的父母（黃色區域）？ – Foo 2013-04-10 18:53:50

因爲在父級上設置了「overflow：auto;」。如果您想保留當前的結構，我爲您添加了一個修復程序。 – Arbel 2013-04-10 18:57:55

我在瀏覽器中嘗試了您的修復程序，對不起，它似乎沒有工作:( – Foo 2013-04-10 19:00:02

嘗試使用最小高度，如果您希望它擴大以填充必要的空間或溢出：隱藏如果不想增長或滾動條。

來源

2013-04-10 22:46:12 Tracker1

即使未設置高度，也會出現垂直滾動條

回答

相關問題