MobileRead Forums - View Single Post - vertical-align/display table

nu9j6e · 01-26-2015, 08:15 AM

I've been playing with this HTML and CSS, using display:table and some vertical-align.
My goal is to resize everything according to the window height and to have the last line always at the bottom of the page.

It works in ADE 3 and Mantano Reader (Nexus 7).
The last < div class="editor" > remains at the bottom when I resize the window, and even when I increase/decrease font size in ADE.

But I worry because it doesn't work in calibre viewer.
So maybe it will not work at all in some readers ?
Are there any caveats I should be aware of ?

Thanks for any feedback

Code:

<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">

<head>
  <title>test 1</title>
  <style type="text/css">
  @page {
    margin: 0;
    }
  html, body  {
    height: 98%;
  }
  body, h1, p {
    margin: 0;
  }
  .pagetitle p, .pagetitle h1 {
    display: table-cell;
    text-align: center;
    text-indent: 0;
  }
  .author, .title, .subtitle, .editor {
    display: table;
    width: 100%;
  }
  .author p {
    vertical-align: middle;
    font-size: 1.3em;
    min-height: 21%;
  }
  h1 {
    vertical-align: middle;
    min-height: 21%;
    font-size: 1.85em;
  }
  .subtitle p {
    vertical-align: top;
    min-height: 21%;
  }
  .editor p {
    vertical-align: bottom;
    font-size: 0.9em;
    min-height: 35%;
  }
  </style>
</head>
<!--
////////////////////////
-->
<body class="pagetitle">

  <div class="author">
    <p>Author</p>
  </div>

  <div class="title">
    <h1>Lorem ipsum<br/>venia minim</h1>
  </div>

  <div class="subtitle">
    <p>Lorem ipsum</p>
  </div>

  <div class="editor">
    <p>Dignissim qui blandit</p>
  </div>

</body>

</html>