全高流体图像和 div 在一行。 Div 必须取剩余水平线 space

Question

这是一个 div 透明 gif 图像，用作左边距，宽度与高度相关。
例如，如果 window 高度为 480px，则 "margin" 将为 48px。

那么，如何让内容 div 占据剩余宽度？
解决方案必须是非 js 和 IE9 & Android 兼容。

N.B。图像有'display: table-cell'，因为似乎只有这样它才能缩小，而不仅仅是增长...

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

几乎可行的解决方案：http://jsfiddle.net/koutsenko/g3fxh3k6/8/ 运行独立 html 时按预期工作，而不是 fiddle。但有问题：在小高度 "margin image" 有额外的余量。

UPD：我使用 javascript 完成了这项任务。似乎只用旧 CSS（没有 vh 单位）是不可能解决这个任务的。

Answer 1

我可能误解了你的问题，但我认为你的意思是你如何获得内容 div 以获取该行的其余部分（无论左侧框中的内容如何）。

我认为解决方案有几个步骤（假设您可以调整标记）：

将图像放入 div 并对其应用 display: table-cell 而不是直接应用于图像。
无论 div/container 环绕在两个单元格都需要一个 display: table.
右边的"content div"也需要display: table-cell组

使用 display: table 和 table-cell 时，最好使用常规标记来模仿实际 HTML table 元素的结构。

注意 1： 如果您只是使用图像创建边距，请考虑使用 CSS padding/margin 来代替旧的-时尚的透明 GIF 技巧。我不是很清楚你为什么要这样做，但以防万一！

注意 2： 如果这不能解决您的问题，请提供 JSFiddle，我很乐意再次访问！祝你好运:)

全高流体图像和 div 在一行。 Div 必须取剩余水平线 space

Full height fluid image and div at one line. Div must take remaining horizontal space

android

css

internet-explorer-9

fluid-layout

aspect-ratio