0

divs基本的にヘッダー、コンテンツ、フッターの3 つのモバイル Web サイトを開発しています。ヘッダーとフッターを固定し、オーバー フローがある場合はコンテンツをスクロールできるようにしたい。現在、私のcssは次のとおりです。

#header{
    top: 0;
    left: 0;
    height: 8%;
    width: 100%;
    position: fixed;
    text-align: center;
    text-height:font-size;
}

#content{
    top: 8%;
    left: 0;
    bottom: 15%;
    width: 100%;
    position: fixed;
    margin: 0;
    padding: 0;
    overflow: auto;
    z-index: 0; 
}

#footer{
    height: 15%;
    width: 100%;
    position: fixed;
    text-align:center;
    bottom: 0;
    left: 0;
    z-index: 1;
}

これは完全に機能しますが、コンテンツにはいくつかのテキストフィールドがあり、モバイルデバイスではキーボードがポップアップするとヘッダーとフッターも押し上げられ、コンテンツフィールドが小さすぎます。テキストを入力するときにそれらを固定しておき、押し上げないようにする方法はありますか?

4

2 に答える 2

1

テキストフィールドがフォーカスされるたびに、JavaScript を使用してフッターを非表示にすることができます。これは、ウェブサイトが小さくなるという事実がオペレーティング システム (キーボードの表示を担当する) にハードコードされているためです。

これは jQuery を使用して行うことができますが、モバイルの場合はさらに優れています (サイズが小さいため): zepto.js

それが役立つことを願っています

于 2013-08-01T13:39:51.910 に答える
-2 
#content{
    top: 8%;
    left: 0;
    bottom: 15%;
    **width: 100%;**
    position: fixed;
    margin: 0;
    padding: 0;
    overflow: auto;
    z-index: 0; 
}

この強調表示されたテキストを px 値に変更します。% 値は、ブラウザのサイズに基づいてオブジェクトを調整します。

于 2013-08-01T13:34:16.373 に答える