我在使用流畅的布局时遇到问题

Question

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

设计的原理如下：

是否可以在不使用 javascript 的情况下实现这一目标，如果不能，可以做些什么来实现我的目标？

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

已找到解决方案！ - 打算使用 Flexbox（做的正是我想要的，而且做的更多），谢谢 Jason！ - 如果我需要添加 IE9 支持，我将使用 Modernizr，如评论中所示。谢谢 XKCD149！

Answer 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>

我在使用流畅的布局时遇到问题

I'm having issues with a fluid layout

html

javascript

css

jquery

fluid-layout