什麼是浮子和高度之間的問題：div的100％

請參閱下面的HTML：什麼是浮子和高度之間的問題：div的100％

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
     html, body 
     { 
      padding: 0; 
      margin: 0; 
      width: 100%; 
      height: 100%; 
      border: 1px solid red; 
     } 
     #MainDiv 
     { 
      width: 100%; 
      min-height: 200px; 
      height: auto; 
      border: 1px solid blue; 
     } 
     #Contents 
     { 
      width: 500px; 
      margin: 0 auto; 
      min-height: 100px; 
      height: auto; 
      border: 1px solid green; 
     } 
     #RContents 
     { 
      float: right; 
      width: 200px; 
      min-height: 50px; 
      height: auto; 
      border: 1px solid pink; 
     } 
     #LContents 
     { 
      float: right; 
      width: 200px; 
      min-height: 50px; 
      height: auto; 
      border: 1px solid yellow; 
     } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div id="MainDiv"> 
     <div id="Contents"> 
      <div id="RContents"> 
       Right Contents 
      </div> 
      <div id="LContents"> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
       Left Contents 
       <br /> 
      </div> 
     </div> 
    </div> 
    </form> 
</body> 
</html>

這的jsfiddle鏈接：
jsfiddle

什麼是浮子和高度之間的問題：在我的例子中100％？

如何強制體，MainDiv和內容的div還會隨着LContents DIV？

min-height s are so important

在此先感謝

來源

2011-10-25 MoonLight

像這樣：

http://jsfiddle.net/9TLFM/

我使用透明清除浮動：既和身體

去除寬度和高度

來源

2011-10-25 14:15:52 TommyBs

感謝您的幫助/但那個div究竟做了什麼？ – MoonLight

基本上使用浮動元素，您需要清除浮動元素，這會拉伸容器元素。你可以在這裏找到更多的信息和其他解決方案 http://www.quirksmode.org/css/clearing.html – TommyBs

只需清除浮游物。

在兩個浮動div的末尾放置一個div（仍在#Contents之內）。

例如：

http://jsfiddle.net/Rj4jf/1/

來源

2011-10-25 14:17:43 jackJoe

身體呢？ – MoonLight

@MoonLight呢？我看起來很好。 – Neal

但對我來說（你的小提琴 - 在FF和ie）身體已經堅持到第一個100％的身高！ – MoonLight

取出float: right從LContents，它似乎做工精細

小提琴：http://jsfiddle.net/Rj4jf/2/

來源

2011-10-25 14:18:04 Neal

身體呢？ – MoonLight

試圖把另一個DIV明確的：無論是在「內容」div末尾：

<div id="MainDiv"> 
    <div id="Contents"> 
     <div id="RContents"> 
      Right Contents 
     </div> 
     <div id="LContents"> 
      Left Contents 
      ...     
     </div> 
     <div style="clear:both"> 
    </div> 
</div>

來源

2011-10-25 14:23:39 Goran

謝謝/但身體呢？當LContents太小並且與LContents一起成長時，我想要100％的身體！ – MoonLight

嘗試最小高度：100％;爲身體 – Goran

什麼是浮子和高度之間的問題：div的100％

回答

相關問題