首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >jQuery移动,在不使用数据位置=“固定”的情况下将页脚设置到屏幕底部,这是可能的吗?

问jQuery移动,在不使用数据位置=“固定”的情况下将页脚设置到屏幕底部,这是可能的吗?
EN

Stack Overflow用户
提问于 2012-07-31 09:36:05
回答 2查看 3.9K关注 0票数 2

我希望将页脚设置为附加在屏幕底部,这可以很容易地通过设置jQuery文档上的详细信息来实现。

然而,这似乎产生了以下不期望的输出:

​

​

因此,通过删除data-position="fixed",页脚就可以很好地适应目标内容的宽度,但是它会漂浮在主内容下面,如下所示:

​

​

问题:如何将页脚附加到屏幕底部,同时确保页脚不会从其容器中溢出?最终目标是在页眉和页脚之间有一个滚动列表。

这是我的HTML,用于上述内容:

代码语言:javascript
复制
<!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:

代码语言:javascript
复制
/*Worklight container div */
#content {
    height: 460px;
    margin: 0 auto;
    width: 320px;
}

谢谢

EN

回答 2

Stack Overflow用户

发布于 2013-07-26 13:25:13

我用这个

代码语言:javascript
复制
<ul data-dojo-type="dojox.mobile.TabBar" class="tab_bar"
data-dojo-props='fixed: "bottom"' syncWithViews="true">
票数 1
EN

Stack Overflow用户

发布于 2012-07-31 16:30:30

你有没有试着改变这个:

代码语言:javascript
复制
#content {
    height: 460px;
    margin: 0 auto;
    width: 320px;
}

这方面:

代码语言:javascript
复制
#content {
    height: auto;
    margin: 0 auto;
    width: auto;
}

或者换句话说,你为什么要限制你的宽度和高度?

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/11737169

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档