jquery mobile：导航面板的固定页脚未调整大小，内容未居中答案

【问题标题】：jquery mobile: fixed footer with nav panel not resized, content not centeredjquery mobile：导航面板的固定页脚未调整大小，内容未居中
【发布时间】：2015-11-20 02:33:21
【问题描述】：

在jfiddle 上查看。（您可能需要添加框架：jquery 1.11.0，然后勾选 jquery mobile 1.4.4 的框。我尝试为我使用的版本添加资源（分别为 1.11.1 和 1.4.5 - 但页面没有'不要从他们的链接渲染。对不起'回合。）

当我将 data-position='fixed' 添加到我的页脚时data-display="reveal" 或 "push"（"overlay" 没有问题），当我打开导航面板（标题左上角的图标）时，页脚按应有的方式向右滑动，但不会调整大小，并且内容不居中。如果我单击背景，则重新调整大小会切换，但内容永远不会居中。我已经选择“覆盖”作为临时修复，但我更喜欢使用“显示”（默认）。导航面板的大部分 CSS 都是从 jquery 移动演示中借用的。

要复制小提琴上的问题，请使用宽屏幕并放大输出面板，以便看到渐变背景，然后单击菜单按钮（栏）。之后，您可以看到页脚滑动（但不能调整其宽度）并滑回调整后的宽度（但不能将页脚中的图标居中）。

任何想法我做错了什么或 CSS 可以解决问题？

这是html：

    <body>

    <div data-role="page" id="index-page" class="ui-responsive-panel" data-title="MMT" data-url="index-page" data-theme="a">
<div data-role="header" >
    <h6 class='header' style="overflow:visible !important;">Test Page</h6>
    <a href="#index_nav-panel" data-icon="bars" class="ui-btn ui-corner-all ui-btn-inline ui-icon-bars ui-btn-icon-left ui-btn-a ui-alt-icon ui-nodisc-icon ui-btn-icon-notext"></a>
    <a href="#popupDialog" data-rel='popup' data-position-to="window" data-transition="pop" data-icon="mail" class="ui-btn ui-corner-all  ui-btn-inline ui-icon-mail ui-btn-icon-left ui-btn-a ui-alt-icon ui-nodisc-icon ui-btn-icon-notext">Contact</a>
</div><!-- /header --> 
<div data-role="panel" class="jqm-navmenu-panel" data-position-fixed="true" data-display="reveal"  id="index_nav-panel">
    <ul data-role="listview">
        <li><a href="#index-page" data-rel="close">Close Menu</a></li>
        <li><a href="#Attorneys-page" data-transition="flip">Blah</a></li>
        <li><a href="#Governmental-Law-Regulation-page" data-transition="flip">Foo</a></li>
        <li><a href="#Government-Affairs-page" data-transition="flip">Bar</a></li>
        <li><a href="#Resource-Links-page" data-transition="flip">Bat</a></li>
    </ul>
</div>

<div role="main" class="ui-content"><div class="banner">Banner Image </div>

    <p>text</p>

    <div style='margin-top:44px;'>
        <ul data-role="listview">
            <li><a href="#" data-transition="flip">Foo</a></li>
            <li><a href="#" data-transition="flip">Bar</a></li>
            <li><a href="#" data-transition="flip">Bat</a></li>
            <li><a href="#" data-transition="flip">Baz</a></li>
            <li><a href="#" data-rel="popup" data-transition="pop" class="ui-icon-mail">Biz </a></li>
        </ul>       
    </div>
    <div data-role='collapsible'  class='ui-nodisc-icon' data-collapsed-icon="home" data-expanded-icon="carat-u" data-mini='true'>
        <h3>Follow...</h3>
        <p>Follow us on Twitter:</p>

    </div>

</div>
<div data-role='footer'  data-position='fixed'>
        <div class='footer'>
            <a href="#popupDialog" data-rel="popup" data-transition="pop" data-icon="mail" class="ui-btn ui-corner-all  ui-btn-inline ui-icon-mail  ui-btn-a ui-alt-icon ui-nodisc-icon ui-btn-icon-notext">Contact</a> <a href="#popupPhone" data-rel="popup" data-transition="slideup" class="ui-btn ui-btn-corner-all  ui-btn-inline ui-icon-phone ui-nodisc-icon ui-btn-a ui-alt-icon ui-btn-icon-notext">Phone:</a>
            <a href="#popupSocialMedia" data-rel="popup" data-transition="slideup" class="ui-btn ui-btn-corner-all ui-icon-home ui-btn-icon-right ui-btn-inline ui-btn-a ui-nodisc-icon ui-btn-icon-notext">Twitter</a>             
        </div>
</div><!-- /footer -->

这是css

    /*css file for mobile website*/
    @media all and (max-width: 50em) {
    .my-breakpoint .ui-block-a, 
    .my-breakpoint .ui-block-b, 
    .my-breakpoint .ui-block-c,
    .my-breakpoint .ui-block-d,
    .my-breakpoint .ui-block-e { 
        width: 100%; 
        float:none; 
        }
    }
.banner img{ 
display:block;
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto 
}

/* set a width for wide screens */
.collapsible {
    max-width:900px;
}

/* to center the content on wide screen pc or laptop */
@media only screen and (min-width: 1025px){
    .ui-page{
        width: 960px !important;
        margin: 0 auto !important;
        position: relative !important;
        /*border-right: 3px rgb(93, 105, 105) outset !important;
        border-left: 3px rgb(93, 105, 105) outset !important;*/
    }
    .ui-footer {
        max-width: 960px !important;
        margin: 0 auto !important;
    }
}

.header, .firm {font-family: 'IM Fell French Canon SC', serif !important;}
.firm{font-size:1.2em; font-weight:bold;}

.ui-header .ui-title {
    margin-right: 10%;
    margin-left: 10%;
}

/*panel background color*/
div#index_nav-panel{
    background-color: rgba(91, 95, 97, 0.1) !important;
}

/*panel stays open on desktops*/
@media (min-width:35em) {

  /* wrap on wide viewports once open */
  .ui-panel-page-content-open.ui-panel-page-content-position-left {
    margin-right: 17em;
  }
  .ui-panel-page-content-open.ui-panel-page-content-position-right {
    margin-left: 17em;
  }
  .ui-panel-page-content-open {
    width: auto;
  }

  /* disable "dismiss" on wide viewports */
  .ui-panel-dismiss {
    display: none;
  }

  /* same as the above but for panels with display mode "push" only */

  .ui-panel-page-content-open.ui-panel-page-content-position-left.ui-panel-    page-content-display-push {
    margin-right: 17em;
  }
  .ui-panel-page-content-open.ui-panel-page-content-position-right.ui-panel-    page-content-display-push {
    margin-left: 17em;
  }
  .ui-panel-page-content-open.ui-panel-page-content-display-push {
    width: auto;
  }

  .ui-panel-dismiss-display-push {
    display: none;
  }

  div.footer {
    text-align: center;
    letter-spacing: .2em;
    font-size: 1em;
  } 

}
/* #### target mobile devices with max device width 480px #### */
@media screen and (max-device-width: 480px){

    div.footer {
        font-size: .75em;
    }

    div.footer a.ui-btn {
      margin-top: 0.1em !important;
}

}
div.footer {
    text-align: center;
/*  font-size: .75em;
 */}
.footer-text{
    color: #999;
    margin-left:-8px;
} 

/*popup dialog background color*/   
div#popupSocialMedia, div#popupDialog {
    background-color: rgb(237,237,237);
}

div#popupDialog .ui-content {
    height: 50%;
}

div.ui-content {  background-color: #f9f9f9 !important;}            

.ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a { 
    background-color: rgb(10, 10, 10) !important;
    background: #d2b48c; /* old browsers */
    background: -webkit-linear-gradient(#efefef,#000000) fixed; /* Chrome     10-25, Safari 5.1-6 */
    background: linear-gradient(#efefef,#000000) fixed; /* W3C, IE 10+/     Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}  

@media (min-width: 60em) {
    .jqm-demos .jqm-header h2 {
        padding: 1em 0 .7em;
        margin: 0 1em 0 3%;
        text-align: left;
    }
    .jqm-demos .jqm-header h2 img {
        width: 275px;
    height: 78px;
}
.jqm-demos .jqm-header p {
    bottom: auto;
    left: auto;
    top: 50%;
    right: 15%;
    font-size: 1.2em;
    margin-top: -.625em;
}
.jqm-demos .jqm-navmenu-link {
    display: none;
}
.jqm-demos .jqm-search-link {
    right: 3%;
}
.jqm-demos .jqm-footer p {
    float: right;
    margin: 1.5em 3% 1.5em 1.5em;
}
.jqm-demos .jqm-footer p:first-child {
    float: left;
    margin: 1.25em 1.25em 1.25em 3%;
}
.jqm-demos .jqm-navmenu-panel {
    visibility: visible;
    position: relative;
    left: 0;
    clip: initial;
    float: left;
    width: 25%;
    background: none;
    -webkit-transition: none !important;
    -moz-transition: none !important;
    transition: none !important;
    -webkit-transform: none !important;
    -moz-transform: none !important;
    transform: none !important;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
.jqm-navmenu-panel .ui-panel-inner {
    margin-top: 3em;
    margin-bottom: 3em;
}
.jqm-navmenu-panel .ui-listview .ui-btn {
    padding-left: 12.5%;
    text-shadow: none !important;
}
.jqm-navmenu-panel .ui-listview .ui-listview .ui-btn {
    padding-left: 15%;
}
.jqm-navmenu-panel .ui-collapsible,
.jqm-navmenu-panel .ui-collapsible-content,
.jqm-navmenu-panel .ui-btn {
    background: none !important;
    border-color: #ddd !important;
}
.jqm-navmenu-panel .ui-btn.ui-btn-active {
    color: #3388cc !important;
}
.jqm-navmenu-panel .ui-btn::after {
    opacity: 0;
    -webkit-transition: opacity 500ms ease;
    -moz-transition: opacity 500ms ease;
    transition: opacity 500ms ease;
}
.jqm-navmenu-panel .ui-btn:hover::after {
    opacity: .6;
}
.ui-panel-dismiss-open.ui-panel-dismiss-position-right {
    left: -17em;
    right: 17em;
}

}

我已经省略了 javascript... 从这里和小提琴。

感谢您查看此内容...

screenshot of the footer extended ...screen shot of the footer retracted after clicking on the background

如果我从页脚中删除“data-position="fixed"，问题就会消失。

【问题讨论】：

分叉并从 Google 的托管库加载了 1.11.0 和 1.4.5，这正在工作：jsfiddle.net/Twisty/gfv5j7mz/1
据我了解，您希望页脚像面板打开时的页眉一样换行？就目前而言，它只是被滑过，但没有像 header 那样被调整大小和重新居中。对吗？
我想知道调用.ui-footer-fixed 是否有帮助，而不是.ui-footer。将进行测试。
如果有人想知道我的“修复”在哪里，这要感谢@ezanker，他的 jfiddle 显示了代码：jsfiddle.net/zKS76/19 和 Omar，他对 op 问题的回答是 @987654326 @.
我会将您的链接和您的答案设置为实际答案并将其标记，以便其他人可以更轻松地找到它。页脚在未“固定”时的工作方式与页眉相同。当它被“修复”时，它会从该包装器中删除，并且 z-index 为 1000，并且与页面的其余部分是独立的。

标签： jquery-mobile

【解决方案1】：

在@twisty 的建议下发布我自己的答案。也见他的 cmets。事实证明，由于我找到了一个不同的 stackoverflow 解决方案来保持我的页面完整大小，所以我的显示在没有 data-position="fixed" 的情况下是相同的......所以我只是删除了它并且所有工作都按“应该”进行。我很想知道为什么页脚与页眉的工作方式不同，但我不想转动任何人的轮子，因为我现在可以毫无问题地继续前进

如果有人想知道我的“修复”在哪里，这要感谢@ezanker，他的 jfiddle 显示了代码：jsfiddle.net/zKS76/19 和 Omar，他对 op 问题的回答是 stackoverflow.com /questions/21552308/…;.

@twisty 提出了页眉和页脚行为不同的原因：“当它被“固定”时，它会从该包装器中删除，并且 z-index 为 1000，并且与页面的其余部分是独立的。“

【讨论】：