页眉、容器、页脚需要适合任何分辨率，无需滚动条答案

【问题标题】：header, container, footer need to fit in any resolution without scroller页眉、容器、页脚需要适合任何分辨率，无需滚动条
【发布时间】：2017-02-13 10:32:57
【问题描述】：

这是我的fiddle，页眉、容器、页脚需要在没有滚动条的情况下适应任何分辨率，或者有什么方法可以在不使用固定位置的情况下做到这一点

img {
  width: 100%;
}
.content {
  background: yellow;
}
footer {
  height: 40px;
  background: #000;
  width: 100%;
  color: #fff;
  position: fixed;
  bottom: 0px;
}

<header class="header">
  <img src="http://www.emedicalpoint.com/images/nav/sprite.jpg" alt="">
</header>
<div class="content">
  <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
  </p>
</div>
<footer>
  footer content comes here
</footer>

【问题讨论】：

标签： jquery html css responsive-design

【解决方案1】：

在<head> 标签内添加这个viewport meta tag：
```
<meta name="viewport" content="width=device-width">
```
这应该使页面以合理的大小呈现。
在<head> 标签内添加这个<style> 标签：
```
<style>
img {
    max-width: 100%;
}
</style>
```
我认为这将确保所有图像的渲染范围不会超过应用的 webview 视口。

【讨论】：

感谢您的回复，这些都是我已经做过的基础知识，但我想知道中间内容是什么？，它应该适合屏幕。那么有什么办法吗？