Div在基本示例中不伸展

我有一個網站，我需要各種各樣的div來伸展到各種動態內容的高度。從我所瞭解的所有周邊/父母divs需要100％身高才能使100％身高在子div上工作。Div在基本示例中不伸展

我添加了100％的HTML和身體的CSS，一切都變得糟糕透頂。我花了很多時間來研究和解決這個問題，並把它歸結爲一個非常基本的失敗的例子。

任何人都可以解釋爲什麼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
<head> 
<style> 
html,body{ 
    height:100%; 
} 
</style> 
</head> 
<body> 
<div style="height:100%; background-color:#00ff00;"> 
    <div style="height:3000px; border:2px solid #ff0000;"> 
     <br style="clear:both;" /> 
    </div><br style="clear:both;" /> 
</div> 
</body> 
</html>

不表現爲我會承擔？我會期待內部div來拉伸父div。我不明白爲什麼會這樣。有人可以向我解釋這一點，或指向正確的方向嗎？

感謝

來源

2012-09-06 Shane

經過十多年的規劃Web應用程序，它仍然困惑，我爲什麼每次都是這樣。我見過許多程序員遇到過這個問題。解釋非常簡單。

在HTML中，佈局系統有一個名爲display的主CSS選項。對於display選項，有兩個主要值可以改變您在輸出中看到的任何內容。第一個值是block，第二個是inline，第三個是上述值的組合，inline-block。當某個元素的display值爲block時，它會水平阻止所有內容，並且不會在元素旁邊放置任何元素。然而，height沒有選擇做同樣的事情。

據我知道，當你的height值設置爲100%你算算手動你的價值利潤率和邊框寬度！和問題是，當你身體width屬性的值設置爲100%時， body元素中的margin的默認值不是'0'！和輸出看起來像狗屎，因爲它愚蠢的滾動。因此，您必須將margin設置爲'0'（在「body」元素上）。

也是另一個問題是，當你做的保證金的事情，滾動得到固定的，相信你應該「體」元素的「溢出」屬性設置爲hidden或visible，而不是「滾動」這是默認值'顯示'選項。它是高度計算公差的後門！你會在輸出中看到它自己。

當然，我不希望爲任何元素使用「clear」屬性，並且在第一行中使用相關的「DOCTYPE」（如HTML4）來兼容性問題會更好。

下面是編輯後的版本：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html> 
    <head> 
     <style> 
      body 
      { 
       height: 100%; 

       margin:0; 

       overflow:hidden; 
      } 
     </style> 
    </head> 
    <body> 
     <div style="height: 100%; background-color: #00ff00;"> 
      <div style="height: 100%; border: 2px solid #ff0000;"> 
      </div> 
     </div> 
    </body> 
</html>

來源

2012-09-06 11:24:11 Rikki

這似乎並沒有解決我的問題。我需要innner div來滿足內容。反過來需要讓用戶看到所有的內容。在上面的例子中，我無法看到內部div底部的邊框。看起來，這兩個div的大小與瀏覽器中的查看區域（IE 100％高度）相同。由於邊界內在的一個稍大，因此我需要另一個div（綠色）來擴展以修復內部div。例如，如果內部div完整的內容，我會需要綠色拉伸到適合結束我需要能夠滾動瀏覽內容。 – Shane

Div在基本示例中不伸展

回答

相關問題