I have a DIV in a table. This code is generated by GWT, so I don’t have a lot of control over the elements that are used (which is to say that I know tables are usually not the best element for layout, but this is not something that I have direct control over).
In Firefox, a DIV with 100% height spills out below the table, while in Chrome the DIV are sized as I would expect. What is going on?
So this one had my pulling out my hair for a while, but it turns out that the DIVs in Firefox were defaulting to
box-sizing: content-boxsetting, while in Chrome they were defaulting to thebox-sizing: border-boxsetting. Because I was using padding in the DIV, this was causing Firefox to display the DIV with a height of 100% plus the padding.The solution was to just specify
-moz-box-sizing: border-boxin the CSS for the div.