我花了太多时间试图解决这个问题，但是到了乔治，我已经明白了！
“尤里卡（Eureka）”时刻正在阅读其他问题，人们在问“我 不 使用桌子怎么办？”
当然，由于使用表，这种布局很容易。但这让我想到了
display:table。
使用可以
display:table为您提供表格布局，而无需像HTML表格布局那样烦琐的标记开销，从而使您可以针对不同的媒体查询使用语义代码和不同的布局。
我最终不得不对标记做 一个
更改：
<div>在图像周围使用包装纸。另外，在处理表格显示时，最大/最小高度都是很奇怪的：
height鉴于父级和子级元素的限制，设置被视为首选高度。因此，在
display:table-row包装div 上将高度设置为零可使该行完全适合内容图像。在content
div上将高度设置为100％，可以很好地填充图像与父容器的最小高度之间的空间。
仅压缩基本代码：
标记：
<div > <div > <img src="http://placekitten.com/600/250" /> </div> <div contentEditable="true"></div>
CSS：
body { overflow-y: scroll; overflow-x: hidden;}body, html { height: 100%;}.container { display: table; width: 100% height: 100%; }div.wrapper{ display:table-row; height:0px; }img { display:table-cell; width:100%; }.bottom { display:table-cell; height:100%; }适用于Firefox 25，Chrome 32，Opera 18和IE10。在IE 8中不起作用，但是那又是什么呢？它在IE8中看起来没有 损坏
，只是无法拉伸而已。
如果您可以在Safari，IE9或移动浏览器中对其进行测试，请发表评论。
