Безразмерная верстка, непонятный отступ [закрыт]

#android #css #android_layout #internet_explorer #responsive

        
             
                
                    
                        
                            Закрыт. Этот вопрос не по теме. Ответы на него в данный
момент не принимаются.
                            
                        
                    
                
                            
                                
                
                        
                            
                        
                    
                        
                            Хотите улучшить этот вопрос? Переформулируйте вопрос,
чтобы он соответствовал тематике «Stack Overflow на русском».
                        
                        Закрыт 2 года назад.
                                                                                
           
                
        
Вот код



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%;
}

    

    
Content DIV, here will be tables and some another content





работает в IE9, Android Browser и т.п.
Слева - резиновый отступ, справа - div с контентом.
Ширина отступа зависит от высоты вьюпорта, поэтому сделал через gif-распорку с нужными
пропорциями.
Распорка и контент должны по высоте быть 100% от вьюпорта, контент занимает все место
справа.
Если сильно сжать в высоту пример, то вылезает дополнительный глючный отступ красного
цвета.
Как сделать, чтобы его не было?
Есть просьба не предлагать верстать в JS...  

Спасибо.

UPDATE На старом CSS без vh units задачу решить невозможно. Сделал на Javascript.



Закрываю ответ - либо js, либо vh units (ныне работает везде) 
    

Ответы

Ответ 1

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