4

Вот код

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 (ныне работает везде)

2
  • @koutsenko, Если вам дан исчерпывающий ответ, отметьте его как верный (нажмите на галку рядом с выбранным ответом). 21 янв 2015 в 16:52
  • Виталина, будет неправильно засчитать попытку за верный ответ. Я кстати ответил сам на свой вопрос в приписке UPDATE.
    – koutsenko
    29 янв 2015 в 19:56

1 ответ 1

1

Глюк браузера, .column-img {5px}, а img{5px}, только перерисовка в браузере спасет.

Обновление

Если убрать display: block; и добавить, то браузер перерисует опять страничку, и отступ исчезнет. Возможно, проблема в font-size, боюсь, тут поможет эксперимент, т.к. используется хак с gif картинкой, чего, конечно, нет в спецификациях. ;) Попробуйте "поиграть с изменением размера".

2
  • 1
    А Вы можете уточнить, какую именно перерисовку имели в виду? Кстати, думаю, дело не в пикселях, а в том, какой контент. Если в нем текст больше, чем на одну строку, но меньше размерами, чем весь контент, - глюк исчезает. Может, можно как-то стилями затюнить контент?
    – koutsenko
    21 янв 2015 в 15:08
  • Обновил ответ.
    – XeL077
    21 янв 2015 в 15:43

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.