1

フレックスボックスのみを使用して、iOS と Android の両方をさまざまな構文でサポートする基本的な CSS モバイル レイアウトを定義しようとしています。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>

私が間違っていることは何ですか？

ありがとうございました ：）

Env: Android nexus 4 4.3 の Chrome 29

4

0 に答える 0