DIV溢出問題

HTML：

<input id="APP" type="button" value="Append"/> 
<div id="wrapper"> 
    <table cellpadding="0" cellspacing="0"> 
     <tr> 
      <td style="width: 100%; height: 30px; background-color: rgb(230,230,230)"> 
      </td> 
     </tr> 
     <tr> 
      <td style="height: 100%;" align="center"> 
       <div id="ContentWrapper"> 
       </div> 
      </td> 
     </tr> 
    </table> 
</div>

CSS：

#wrapper{ 
width: 80%; 
height: 300px; 
background-color: rgb(25,25,25); 
} 

#wrapper table{ 
width: 100%; 
height: 100%; 
} 

#wrapper table td{ 
vertical-align: middle; 
} 

#ContentWrapper{ 
width: 98%; 
height: 95%; 
border: 1px solid blue; 
color: rgb(255,255,255); 
text-align: left; 
overflow-y: auto; 
}

的jQuery：

$("#APP").on("click",function(){ 
    $("#ContentWrapper").append("Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>Test<br/>"); 
});

如果你測試這個在Chrome或任何其他瀏覽器y你會發現它的工作原理應該如此。但在Firefox中，如果持續按下「追加」按鈕，div的高度將隨着內容而改變，儘管div的溢出設置爲auto。

我知道這將工作，如果我將設置div的尺寸在px而不是百分比，但我不想這樣做。我把那個小提琴作爲一個例子來指出這個問題，但在我的原始代碼中，保存表格的包裝是響應式的，我必須保持百分比。

來源

2015-03-13 Colin

有趣的發現。它帶來了Firefox中的一個bug。
但是，有一種解決方法：爲表中的tbody指定一個明確的高度。

#wrapper table, #wrapper tbody { 
    width: 100%; height:100%; 
}

請參閱updated fiddle。請注意，我還更改了其他一些屬性，因爲瀏覽器被top td設置爲30px高，而最低設置爲100％。我改變了10％和90％;你可能不得不在你的情況下使用其他值。（也許使用calc（...）作爲其中之一。）

來源

2015-06-21 20:10:55

回答

相關問題