我遇到了流畅的布局问题

时间:2016-01-06 19:41:23

标签: javascript jquery html css fluid-layout

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

以下是设计的工作原理: enter image description here

是否有可能在不使用javascript的情况下实现这一目标,如果没有,可以采取哪些措施来实现我的目标?

编辑:删除代码,因为它不再相关。

已找到解决方案! - 使用Flexbox(完全符合我的要求加上它做得更多),谢谢Jason! - 如果我需要添加IE9支持,我将使用Modernizr,如评论中所示。谢谢XKCD149!

1 个答案:

答案 0 :(得分: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>