2

フッターを画面の下部に添付するように設定したいのですが、これ<div data-role="footer" data-id="persistent_navbar" data-position="fixed">はjqueryのドキュメントで詳しく説明されているように設定することで簡単に行うことができます

ただし、次の望ましくない出力が生成されるようです。

ここに画像の説明を入力

を削除するdata-position="fixed"と、フッターはターゲット コンテンツの幅にぴったりと収まりますが、次のようにメイン コンテンツの下に浮いてしまいます。

ここに画像の説明を入力

質問:画面の下部にフッターを追加すると同時に、フッターがコンテナーからはみ出さないようにするにはどうすればよいですか? 最終的な目標は、ヘッダーとフッターの間にスクロール リストを配置することです。

これは上記の私のHTMLです:

<!DOCTYPE html>     
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
        <title>SmartConf</title>
        <link rel="shortcut icon" href="images/favicon.png" />
        <link rel="apple-touch-icon" href="images/apple-touch-icon.png" />
        <link rel="stylesheet" href="css/reset.css" />
        <link rel="stylesheet" href="css/SmartConf.css" />
        <link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
    </head>
    <body onload="WL.Client.init({})" id="content" style="display: none">

        <div data-role="page">
                <div data-role="header">
                    <h1>Welcome</h1>
                </div><!-- /header -->

                <div data-role="content">
                <a href="home.html" data-role="button">Enter</a>    

                </div><!-- /content -->

                <div data-role="footer" data-id="persistent_navbar">
                    <h4>Some footer here</h4>
                </div>

            </div><!-- /page -->



        <script src="js/SmartConf.js"></script>
        <script src="js/messages.js"></script>
        <script src="js/auth.js"></script>
        <script src="js/jquery/jquery.mobile-1.1.1.js"></script>
    </body>
</html>

SmartConf.css：_

/*Worklight container div */
#content {
    height: 460px;
    margin: 0 auto;
    width: 320px;
}

ありがとう

4

2 に答える 2

0

これを変更しようとしましたか：

#content {
    height: 460px;
    margin: 0 auto;
    width: 320px;
}

これに：

#content {
    height: auto;
    margin: 0 auto;
    width: auto;
}

言い換えれば、なぜ幅と高さに制限を設けるのですか?

于 2012-07-31T16:30:30.887 に答える