我正在尝试拥有可用于移动支持的流畅设计。我可以让它放大并正确调整 div 的大小,但是当我尝试为聊天窗口和聊天消息输入框添加固定位置时,它不起作用。 Div 2 和 Div 3 聚集到 Div 1,如果我将包装器更改为固定位置,自动调整大小将完全停止工作。
是否可以在不使用 javascript 的情况下实现这一目标,如果不能,可以做些什么来实现我的目标?
编辑:删除代码,因为它不再相关。
找到解决办法了! - 打算使用 Flexbox(做的正是我想要的,而且做的更多),谢谢 Jason! - 如果我需要添加 IE9 支持,我将使用 Modernizr,如评论中所示。谢谢 XKCD149!
最佳答案
下面是使用 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>
关于javascript - 我在使用流畅的布局时遇到问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34641424/