Question

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

当我添加data-position =＆＃39; fixed＆＃39;在页面上我的页脚，在较大的屏幕上减小宽度（在css中设置媒体查询）和导航面板，使用数据显示在大屏幕上打开=＆＃34;显示＆＃34;或＆＃34;推＆＃34; （没有问题＆＃34; overlay＆＃34;），当我打开导航面板（标题左上角的图标）时，页脚会按原样向右滑动，但不会调整大小，并且内容不会居中。如果我点击背景，重新调整尺寸会切换，但内容永远不会中心。我已经选择了＆＃34; overlay＆＃34;作为一个临时修复，但我更喜欢使用＆＃34;揭示＆＃34; （默认）。导航面板的大部分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

如果我删除＆＃34; data-position =＆＃34; fixed＆＃34;从页脚。

Answer 1

在@ twisty的建议下发表我自己的答案。看他的评论。事实证明，因为我找到了一个不同的stackoverflow解决方案来保持我的页面全尺寸，我的显示是相同的没有数据位置=＆＃34;固定＆＃34; ...所以我只是删除它，所有工作原样＃34;应该＆＃34 ;.我很想知道为什么页脚不会像标题那样工作，但是我不想旋转任何人的轮子，因为我现在可以向前移动而没有问题

如果有人想知道我在哪里修理＆＃39;是的，感谢@ezanker，他的jfiddle显示代码：jsfiddle.net/zKS76/19和Omar，他们对op的问题的回答是stackoverflow.com/questions/21552308 / ... ;

@twisty建议页眉和页脚的行为不同的原因：＆＃34;当它被修复＆＃34;它已从该包装中删除，并且z-index为1000，并且与页面的其余部分无关。＆＃34;

jquery mobile：固定页脚，导航面板没有调整大小，内容不居中

1 个答案: