我遇到了流畅布局的问题答案

【问题标题】：I'm having issues with a fluid layout我遇到了流畅布局的问题
【发布时间】：2016-04-11 00:47:50
【问题描述】：

我正在尝试一种可用于移动支持的流畅设计。我可以让它放大并正确调整 div 的大小，但是当我尝试为聊天窗口和聊天消息输入框添加固定位置时，它不起作用。 Div 2 和 Div 3 合并到 Div 1，如果我将包装器更改为固定位置，自动调整大小将完全停止工作。

以下是设计的工作原理：

是否有可能不使用 javascript 来实现这一点，如果没有，可以做些什么来实现我的目标？

编辑：删除代码，因为它不再相关。

已找到解决方案！ - 打算使用 Flexbox（完全符合我的要求，而且做得更多），谢谢 Jason！ - 如果我需要添加 IE9 支持，我将使用 Modernizr，如 cmets 所示。谢谢XKCD149！

【问题讨论】：

不要使用浮点数。使用弹性盒子！
远离内联样式，如果遇到问题，请查看 Bootstrap 之类的框架。
我已经很喜欢 flexbox（很棒的发现），但不幸的是它不兼容 IE9，我不想使用臃肿的 boostrap。我没有使用太多的内联样式，主要是为了解释这里发生了什么。我希望尽可能避免使用任何第三方插件。
Modernizr stackoverflow.com/questions/24371408/…
让我印象深刻，我现在被 flexbox 解决方案所吸引。 :) 谢谢大家的帮助！无论如何，IE9 的用户不到 1%，Modernizr 是缓解必要时处理 IE9 痛苦的好方法。

标签： javascript jquery html css fluid-layout

【解决方案1】：

以下是使用 flexbox 完成上述布局的方法：

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

nav {
  background-color: blue;
  height: 50px;
}

article {
  background-color: red;
  flex: 1 0 auto;
}

footer {
  background-color: green;
  height: 50px;
}

<div class="wrapper">
  <nav>My Nav</nav>
  <article>My Main Body</article>
  <footer>Footer</footer>
</div>

【讨论】：

谢谢！我仍在浏览教程，您的答案很棒！老实说，灵活的布局使用老式方式变得非常困难。
很高兴我能帮上忙 :)