モバイル HTML の垂直レイアウトの基本フレームワーク page_html/css_WEB-ITnose

携帯電話用ページの一般的なレイアウト方法は、ヘッダー、メイン、フッターです。以下に示すように、いくつかの一般的な操作がヘッダーとフッターに配置され、メイン部分にコンテンツが表示されます。実現される効果は、ヘッダーが先頭に固定され、フッターが下部に固定され、メイン部分がスクロールできることです。実装のアイデアは次のとおりです。

1.固定)

CSS の位​​置を使用:固定は、ヘッダーとフッターをそれぞれウィンドウの上部と下部に固定する最も直接的な方法です。この方法は最も単純で直接的ですが、次の 2 つの問題があります。 1. 中央のメイン部分にはヘッダーとフッター用のスペースを確保する必要があります。そうしないと、コンテンツが覆われてしまいます。ヘッダーとフッターの高さがわかっていて固定されている場合は、本文にマージンを設定することで解決できます。不明な場合はjsを使って計算する必要があるため、柔軟性に欠ける。 2. iOS環境では、ページ上に入力スペースがある場合、入力中にソフトキーボードを呼び出すと問題が発生する。失敗するとフッターの表示位置が崩れてしまうのを修正しました（Androidでは問題ありません）。したがって、この固定方法は単純に見えますが、使用すると多くの問題があります。

2. 絶対配置 (absolute)

絶対配置を使用すると、ヘッダー、メイン、フッターを絶対を使用して固定位置に配置し、メインが自動スクロールをサポートし、存在する場合にのみスクロールが発生します。コンテンツが豊富 main ではヘッダーとフッターの位置が固定されています。この方法の制限は、ヘッダーとフッターの高さを決定する必要があることです。よくわからない場合は、柔軟性が不十分な js を使用する必要があります。

3. 柔軟な位置 (フレックス)

柔軟なレイアウトは、コンテナーと設定されたルールに従ってサブ要素のサイズを自動的に調整でき、垂直レイアウトの問題を解決するのに非常に適しています。ただし、落とし穴もたくさんあります。まず、フレキシブル レイアウトには新しいバージョン (display:flex) と古いバージョン (display:box) の 2 つのバージョンがあります。もちろん、私は新しいバージョンを使用したいのですが、幸いにも Android バージョンの WeChat はそれをサポートしていません。主流のブラウザは古いバージョンもサポートしているため、最初は古いバージョンを使用してください (単純な互換性テストのみ)。次に、メイン領域をスクロールする必要がある場合、Android バージョンの WeChat では、スクロール画面が最後に達するまで、フッター内のボタンがクリック イベントに応答できなくなります。メイン領域がフッターを覆っているようです。フッターは常に表示されます) と Z インデックスの設定も機能しません。

コードを見てください:

<div class='flex-frame' ng-controller="myCtrl2">    <header class='flex-bar'>        <button class='btn btn-lg btn-default' ng-click="click($event,'buttonA')">buttonA</button>    </header>    <div class='flex-main'>        <div class='flex-main-wrap'>            <ul class='list-group'>                <li class='list-group-item' ng-repeat="d in data" ng-bind="d"></li>            </ul>            <input type='text' class='form-control input-lg'>        </div>    </div>    <footer class='flex-bar'>        <button class='btn btn-lg btn-default' ng-click="click($event,'button1')">button1</button>        <button class='btn btn-lg btn-default' ng-click="click($event,'button2')">button2</button>    </footer></div>

.flex-frame{height:100%;width:100%;background:#eff;display:-webkit-box;-webkit-box-orient:vertical;}.flex-bar{display:-webkit-box;padding:4px;background:#eee;}.flex-bar>button{display:block;-webkit-box-flex:1.0;margin-left:4px;}.flex-bar>button:first-child{margin-left:0;}.flex-main{position:relative;background:#ccc;-webkit-box-flex:1.0;overflow-y:hidden;padding-bottom:80px;}.flex-main-wrap{position:absolute;top:0;bottom:0;left:0;right:0;overflow-y:auto;}

例を見てください

var data = [], i = 0;while (i<30) {     data.push('row:' + i);     i++;}$scope.data = data;$scope.click = function(event, name) {     alert('click ' + name);}

追記:

1.タグが見つかりましたが、WeChat のブラウザが見つかりました。メインのタグがわからない場合は、div を直接使用してください。

2. WeChat でメイン領域をスクロールする必要がある場合、フッターが覆われているようで、クリック イベントに応答できません。次の段落を見つけました。それが理由です。
オーバーフロー プロパティの計算値が「visible」、「scroll」、または「auto」の場合、コンテンツがコンテナからオーバーフローする可能性があります。direction の計算値が通常の場合、コンテンツは右側または下側からオーバーフローします。方向の計算値が逆の場合、コンテンツが左側または上側にオーバーフローします。
この問題を解決するために、制御のために flex-main-wrap が追加されます。

参考:

https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Flexible_Box_Layout

http://www.w3.org/TR/2009/WD -css3-flexbox-20090723/