1

モバイルHTMLを作成していて、スペースを100％使用するdivを作成したいのですが、コンテナーを使用せず、3つのdivを使用して3つの部分に分割し、次のレイアウトにします。

ここに画像の説明を入力してください

divを使用してこれを行うにはどうすればよいですか。試しましたが、パーセンテージと固定の高さのdivがあると混乱します。横に並べたものでもできますが、縦に並べると混乱します。一番下を絶対にすることで重ならないようにします。

編集

残りのスペースは、基本的にoverscroll-y、スペース全体を使い果たす1つの大きなdivです。

タイトルバーの下のセクションにレイアウトを配置する必要があります。これがposition: fixed、親コンテナに干渉するため、使用できない理由です。

ここに画像の説明を入力してください

4

2 に答える 2

2

まず、編集した質問の画像はおそらく JQuery Mobile からのものです。jQuery モバイルの使用を検討してください。それも一つの選択肢かもしれません。

<style type="text/css">
    #container{position: relative; width: 100%; height: 100%;  background-color:#ddd; z-index:1;}
    #header{position: fixed; top:0; left:0; width:100%; height: 80px; background-color:#f30;z-index:3;}
    #footer{position: fixed; bottom:0; left:0; width:100%;  height: 80px;  background-color:#f30;z-index:4;}
    #content{width:100%; z-index:5; padding-top: 90px; padding-bottom: 80px;}
</style>

<div id="container">

<div id="header">

</div>

<div id="content">
    Put body content here...

</div>

<div id="footer">

</div>

</div>

すべてにスパイスを加えるには、jQuery が必要になる場合があります。これで基本的な考え方が得られるはずです。

于 2013-03-04T16:33:35.857 に答える
0

http://jsfiddle.net/wy6rS/1/

<div id="toolbar">This is fixed toolbar.</div>
  <div id="wrap">
    <div id="header">This is the header</div>
      <div id="content">Content will Expand with scripting. Notice the push.</div>
        <div id="push"></div>
  <div> <!--wrap ends here-->
<div id="footer">This is the footer</div>

プッシュにより、スティッキー フッター用のスペースが作成されます。#wrap の負のマージンが等しいことに注意してください。

#wrap { width:100%; min-height:100%; height:100% !important; margin-bottom:-80px; margin-top:50px; }
#toolbar { position:fixed; top:0; width:100%; height:50px; }
#header { height: 140px; }
#content { min-height:300px; height:100%; }
#push, #footer { height:80px; } /* Must be same height as footer */

次に、コンテンツを展開するためのスクリプトが必要になります。jsfiddle を確認します。実際のページで動作します。

于 2013-03-04T16:43:04.873 に答える