100% height, safe to use?

Question

Is "height:100%" on divs or tables pretty much safe to use at this point?
I know it wasn't, a few years ago... and required a bunch of hacks to work universally.

Answer 1

JTANNA wrote:
No because my ESP is down today because we are still in a holiday mode (I am based in chilly London).  I spent just 5 minutes on that code and now I have spent another 3 minutes to modify it slightly so use this CSS:
    height: 100%;
body, html {
    height: 100%;
body {
    width: 100%;
    margin: auto;
    text-align: center;
#wrapper {
    width: 980px;
    height: 100%;
    position: relative;
    display: table;
    margin: 0 auto;
    text-align: left;
    overflow: scroll;
#left {
    display: table-cell;
    width: 300px;
    background-color: gray;
    vertical-align: middle;
#images {
    display: table-cell;
    background-color: silver;
    max-width: 680px;
    text-align: left;
    vertical-align: middle;
Having observed the code more closely, I see that this does not align the text with the image if there is more than one image. It treats Text#1, Image#1, Text#2 and Image#2 as 4 distinct elements. In other words, if the amount of text on the first row is minimal, the text on the next row will be too high in relation to the image on that row.
The only solution I see to this problem, is taking id="left" out of the flow via absolute postitioning, and using it only as a visual aid (to see the white column), and then superimposing stacked divs that would each contain 1 text and 1 image.
i.e.:
<div id="wrapper">
  <div id="left></div>  <-- just a 100% tall white div, for appearance
  <div>
    <div>Text goes here.</div>
    <img src="image">
  </div>
  <div>
    <div>Text goes here.</div>
    <img src="image">
  </div>
</div>
So the text will always be correctly paired with its related image.
Feel free to correct me if I err, here.