Forum Bugs

Percentage height ignored for display:table

If an element has display:table it will ignore percentage heights. Testcase:

<title>100% height table</title>
<style type="text/css">
body > div {
  height: 100px;
  width: 100px;
  background: red;
div > div {
	display: table;
  height: 100%;
  width: 100px;
  background: lime;
<p>There should be no red on this page.</p>
Thanks, I've added this issue to the roadmap and we will fix it in a future release. We've only just added support for height on tables and it seems that there may still be some issues with it. Can you use a table-cell instead as a temporary workaround?
mikeday wrote:
Can you use a table-cell instead as a temporary workaround?


Not in the case where this was used (trying to vertically align inside a page), because a table cell generates an anonymous table, and its percentage height becomes relative to that. The anonymous table has auto height, so it shrinks to fit. Alternative workarounds were made by using absolute heights for known paper sizes.
Oh, I see. This sounds rather like the use case for "position: center" which has been suggested for inclusion in CSS a few times, to replace the auto margin hacks and similar trickery that is required at the moment.
Support for percentage heights on tables has now been implemented in Prince 6.0 rev 2. Thanks for reporting the issue! :)

I'm trying to accomplish this same thing using the latest version of prince, and have not found that applying a height to a div with a style of display:table is doing anything. I've set the height to 2%, works a treat in my browser and when I try to export the PDF, the height is going WELL above 2% (closer to 6%). When I make one of the boxes go above the size it seems to be generating, it will grow, it just doesn't seem to go below a certain height. Any insight into why this might be happening, is this a bug?
Can you check if you get similar behaviour with an absolute height, eg. specified in mm or px units? Just to clarify whether this is a percentage issue or a height issue.