Forum › How do I...?
Table with 100% of page height. (see attachment)
Taking 100% of the page height without specifying a fixed height or affecting page breaking can be a bit tricky sometimes. We'll take a look at this and see if we can put together a nice clear example.
Sorry for the delay, I am experimenting with a document like this:
However, I'm running into some layout issues that just don't look right. It looks okay in the browser, but I think the "height: 100%" can still cause trouble for Prince. We will investigate and see if we can make it work better.
<html>
<head>
<style>
html, body { height: 100% }
</style>
</head>
<body>
<table border="1" style="width: 100%; height: 100%">
<tr>
<td rowspan="2">
Variable height #1
</td>
<td style="height: 1in">
Fixed height
</td>
</tr>
<tr>
<td>
Variable height #2
</td>
</tr>
</table>
</body>
</html>
However, I'm running into some layout issues that just don't look right. It looks okay in the browser, but I think the "height: 100%" can still cause trouble for Prince. We will investigate and see if we can make it work better.
Due to the way table height is divided up between table rows, you will get better results by applying the height that you want directly to the table rows themselves. For example, 1in for the small cell at the top, 5in for the bigger cell that takes the remaining space.