这里是一个 div 和透明 gif 用作左边距与高度相关的宽度。
例如，如果窗口高度为 480px，则“边距”将为 48px。
那么，如何让content div占据剩余宽度呢？
解决方案必须是非 js 且兼容 IE9 和 Android。
注 Intent 像有'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 中。 但有问题:在小高度“边距图像”有额外的边距。
UPD:我使用 javascript 完成了这项任务。似乎只用旧的 CSS(没有 vh 单位)是不可能解决这个任务的。
最佳答案
我可能误解了您的问题，但我认为您的意思是如何让内容 div 占据该行的其余部分(无论左侧框中的内容如何)。
我认为解决方案有几个步骤(假设您可以调整标记):
- 将图像放入一个 div 中，并将
display: table-cell应用于该 div，而不是直接应用于图像。 - 无论什么 div/container 环绕两个单元格都需要一个
display: table。 - 右边的“content div”也需要一个
display: table-cell集。
使用display:table 和table-cell 时，最好使用常规标记来模仿实际HTML table 元素的结构。
注意 1:如果您只是使用图像创建边距，请考虑使用 CSS 填充/边距来代替老式的透明 GIF 技巧。我不是很清楚你为什么要这样做，但以防万一!
注意 2:如果这不能解决您的问题，请提供 JSFiddle，我很乐意再次访问!祝你好运:)
关于android - 全高流体图像和 div 在一行中。 Div 必须占据剩余的水平空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28051967/