Question

如何将此导航栏移动到页面底部，但不能使用data-position =＆＃34; fixed＆＃34;。此刻它将在最后一个div之后直接显示而不是在底部。我怎么能做到这一点？因为如果内容比可视部分长，则fixed会使其重叠。

         <div data-role="footer">
            <div data-role="navbar" >
                <ul>
                    <li><a href="#order">Order</a></li>
                    <li><a href="#home">Home</a></li>
                </ul>
            </div>
        </div>

Answer 1

无论您在这种情况下使用什么，如果您的内容高度大于应用程序的可见部分，它将始终与应用程序页脚重叠。

所以请回到：

data-position="fixed"

下一部分要求限制内容高度。一种解决方案是基于java脚本， ezanker 已经向您展示了它。其他解决方案纯粹基于CSS，如果您更喜欢更直接的方法，请更多地了解 here 。

.ui-content {
    padding: 0;
    position: absolute !important;
    top : 40px !important; 
    right : 0;
    bottom : 40px !important; 
    left : 0 !important;    
}

仍然这还不够，如果您的内容较大，您仍然希望它可以滚动但不影响页脚。

这可以通过iScroll插件实现，您可以阅读更多相关信息 here （带有工作示例）。

或者查看我以前的相关答案 here 。

Answer 2

几周前我实际上写了一篇博客：

<强> http://jqmtricks.wordpress.com/2014/05/15/content-div-height-fill-page-heightpart-2/

基本上你设置内容div的最小高度，以确保它填充页面的短内容，但然后允许页脚被推送＆＃39;更长的内容。

相关脚本是

function contentHeight() {
    var screen = $.mobile.getScreenHeight();
    var header = $(".ui-header").hasClass("ui-header-fixed") ? $(".ui-header").outerHeight() - 1 : $(".ui-header").outerHeight();
    var footer = $(".ui-footer").hasClass("ui-footer-fixed") ? $(".ui-footer").outerHeight() - 1 : $(".ui-footer").outerHeight();
    var contentCurrent = $(".ui-content").outerHeight() - $(".ui-content").height();

    var content = screen - header - footer - contentCurrent;
    $(".ui-content").css("min-height", content + "px");
}

$(document).on("pagecontainertransition", contentHeight);
$(window).on("throttledresize orientationchange", contentHeight);

正在使用 DEMO

Answer 3

   html {
      height: 100%;
    }

    body {
      margin: 0;
      padding:0;
      line-height: normal;
      height: 100%;
    }

    .header {
      background:#4a90e2;
      padding: 16px 0 16px 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .main-container {
      min-height: 100%;
      display: grid;
      grid-template-rows: auto 1fr;
      background: #f1f1f1;
    }

    p {
      padding:0 20px;
    }

     .footer {
       background: #4a90e2;
       padding: 11px 25px;
       grid-row-start: 3;
       grid-row-end: 3;
       z-index: 1;
    }

demo link

页脚底部但不固定的页脚

3 个答案: