Question

这是一个div和透明的gif，用作左边距，高度相关的宽度例如，如果窗口高度为480px，那么＆＃34; margin＆＃34;将是48px。

那么，我怎样才能使内容div占用剩余宽度？
解决方案必须是非js和IE9＆amp; Android兼容。

N.B。图像有＆＃39;显示：table-cell＆＃39;，因为似乎只有这样它才能收缩，不仅会增长......

<--------------------- 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时，按预期工作，而不是小提琴。但有问题：在较小的高度＆＃34;边缘图像＆＃34;有额外的保证金。

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

Answer 1

我可能会误解你的问题，但我认为你的意思是如何让内容div占用剩下的行（不管左边的内容是什么）。

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

将图片放入div并将display: table-cell应用于该图片，而不是直接应用于图片。
无论div /容器包围两个单元格都需要display: table。
右侧的“内容div”也需要设置display: table-cell。

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

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

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

全高流体图像和div在一条线上。 Div必须占用剩余的水平空间

1 个答案: