[Material Design Lite] 固定ヘッダーで下スクロールしてもスマホChromeのアドレスバーが隠れない

Material Design Lite Material Design Lite CSS
2018-05-25 (金)

MDL の Fixed header を使用すると、AndroidのChromeで下スクロールしてもアドレスバーが非表示にならない。CSSを追加定義して対応します。

環境

  • Windows 10 Pro 64bit 1709
  • Google Chrome 66.0.3359.181 64bit
  • Material Design Lite 1.3.0

実装

style.cssを作成して、スタイルを上書きして対策する。
htmlでmaterial.min.cssの後にstyle.cssを読み込む。

<head>
  <link rel="stylesheet" href="material.min.css" />
  <link rel="stylesheet" href="style.css" />
</head>

style.css

.mdl-layout {
    overflow: visible;
}
.mdl-layout__drawer {
    position: fixed;
}
.mdl-layout__content {
    display: block;
    overflow: visible;
    margin-top: 64px;
}
.is-small-screen .mdl-layout__content {
    margin-top: 56px;
}
.mdl-layout__header {
    position: fixed;
}
.mdl-layout__obfuscator {
    position: fixed;
}

感謝

Material Design Lite Material Design Lite CSS
2018-05-25 (金)
[Git] 歴史上から特定のファイルを削除する
[WPF] GridSplitter 画面を分割して境界線をドラッグしてリサイズする

関連記事

新着記事