How to stretch a div horizontally if it is preceded by an image with 100% height?

Question

css

There is a div that is preceded by a tricky padding on the left - the padding width should depend on the height of the window, I did this by embedding an image with the right proportions.
How can I force a div to take up all the remaining space on the right horizontally?
Without js and to make the solution suitable for IE9 and Android Browser...

<--------------------- 100% WINDOW WIDTH ---------------->
,--------------------------------------------------------, ^
||                     ||                |               | |
||     IMG 1x10 px     ||  CONTENT DIV   |  FREE SPACE   | |
|| display: table-cell ||                |               | | 100% WINDOW HEIGHT
||   height 100 %      ||  height 100 %  |               | |
||                     ||                |               | |
'--------------------------------------------------------' ь

Picture (table-cell will allow it to be proportionally not only increased, but also reduced):

<img src="data:image/gif;base64,R0lGODdhAQAKAIAAAAAAAP///ywAAAAAAQAKAAACA4SPBQA7" style="height: 100%; display: table-cell;"/>

UPD An almost working version of the solution - jsfiddle.net/koutsenko/g3fxh3k6/8 , buggy at low heights - a black spacer image has a random additional indent on the right...
TOTAL It is impossible to make a task on the old CSS without vh units. Made in Javascript.

Answer 1

I hope I understood you correctly jsfiddle.net/u8wwuohv