1

我正在尝试仅使用 flexbox 定义一个基本的 CSS 移动布局，它支持 iOS 和 Android 的各种语法。除了 Chrome 上的 Android 滚动条看起来有一个初始偏移之外，它在调整大小方面工作得很好。

现场演示：http ://plnkr.co/edit/11MJsXIAFKcYGna4Eytm?p=preview

示例 CSS：

/* flexbox layout
    - applied to body but can be any container
    - combine all webkit syntaxes
*/
html, body {
    height:100%;  
}
body {
  position:relative;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-orient: vertical;
  -webkit-box-align: stretch;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow:column;
  flex-flow:column;
  align-items: stretch;
}
.header {
  box-sizing:border-box;
  -webkit-box-sizing:border-box;
  height:40px;
  min-height:40px;
  -webkit-box-flex:0;
  -webkit-flex:0 1 auto;
  flex:0 1 auto;
  // inner shadow
  z-index:10000;
  position: relative;
  box-shadow: 0px 5px 10px -5px #333;
}
.content {
  position:relative;
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  min-height: 0px;
}
.footer {
  height:64px;
  min-height:64px;
  -webkit-box-flex:0;
  -webkit-flex:0 1 auto;
  flex:0 1 auto;
  // inner shadow
  z-index:10000;
  position: relative;
  box-shadow: 0px 0px 10px 0px #333;
}

示例 HTML：

<body>
    <div class="header">FlexBox layout demo</div>
    <div class="content">long blbalbalaba</div>
    <div class="footer">bottom toolbar</div>
</body>

知道我在做什么错吗？

谢谢 ：）

环境：Android nexus 4 4.3 上的 Chrome 29

4

0 回答 0