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

DIV溢出问题

回答

相关问题