Вот код
window.onload = window.onresize = function() {
this.timeout && clearTimeout(this.timeout);
this.timeout = setTimeout(function() {
var image = document.getElementsByTagName('img')[0];
document.documentElement.style.fontSize = image.offsetHeight + '%';
}, 10);
}
html, body {
height: 100%;
width:100%;
margin: 0;
}
.table {height: 100%; width:100%; display:table;}
.column {
height: 100%;
display: table-cell;
border: 1px solid green;
vertical-align: top;
}
.column-img {
display: table-cell;
height: 100%;
background: red; /* for debugging */
}
img {
display: block;
height: 100%;
}
<div class="table">
<div class="column-img"><img src="data:image/gif;base64,R0lGODdhAQAKAIAAAAAAAP///ywAAAAAAQAKAAACA4SPBQA7"/></div>
<div class="column">Content DIV, here will be tables and some another content</div>
</div>
работает в IE9, Android Browser и т.п.
Слева - резиновый отступ, справа - div с контентом.
Ширина отступа зависит от высоты вьюпорта, поэтому сделал через gif-распорку с нужными пропорциями.
Распорка и контент должны по высоте быть 100% от вьюпорта, контент занимает все место справа.
Если сильно сжать в высоту пример, то вылезает дополнительный глючный отступ красного цвета.
Как сделать, чтобы его не было?
Есть просьба не предлагать верстать в JS...
Спасибо.
UPDATE На старом CSS без vh units задачу решить невозможно. Сделал на Javascript.
Закрываю ответ - либо js, либо vh units (ныне работает везде)