应用程序的Zurb固定菜单页脚

Question

I am using the following code to try and achieve a fix menu bar at the bottom of our web app like you would commonly see in a standard iOS app. The only problem is that when the content extends the boundaries of the window the menu is being pushed down

!!!
%html{:lang => 'en', 'ng-app' => 'foundation', 'zf-esc-close' => ''}
  %head
    %meta{:content => 'text/html; charset=UTF-8', 'http-equiv' => 'Content-Type'}/
    %meta{:charset => 'utf-8'}/
    %meta{:content => 'width=device-width, initial-scale=1.0', :name => 'viewport'}/
    %title= content_for?(:title) ? yield(:title) : "Bean'n'Gone"
    = stylesheet_link_tag    'application'
    %script{:src => 'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js'}
    = javascript_include_tag 'application'
    = csrf_meta_tags
  %body
    .grid-frame.vertical
      .title-bar
        = link_to image_tag('logo.png', size: '152x70'), root_url, class: 'center title'
      .grid-block
        #main.small-12.grid-block
          = yield
      .grid.content.shrink
        %ul.menu-bar
          %li
            %a{href:menu_items_url}
              %img{icon: 'magnifying-glass', size: 'medium', 'zf-iconic': ''} Coffees
          %li
            %a{href: orders_url}
              %img{icon: 'document', size: 'medium', 'zf-iconic': ''} Orders
          %li
            %a{href: edit_person_registration_url}
              %img{icon: 'person', size: 'medium', 'zf-iconic': ''} Account
          %li
            %a
              %img{icon: 'cart', size: 'medium', 'zf-iconic': ''} Checkout

Answer 1

fixed the issue by changing the menu to a grid-block like below

!!!
%html{:lang => 'en', 'ng-app' => 'foundation', 'zf-esc-close' => ''}
  %head
    %meta{:content => 'text/html; charset=UTF-8', 'http-equiv' => 'Content-Type'}/
    %meta{:charset => 'utf-8'}/
    %meta{:content => 'width=device-width, initial-scale=1.0', :name => 'viewport'}/
    %title= content_for?(:title) ? yield(:title) : "Bean'n'Gone"
    = stylesheet_link_tag    'application'
    %script{:src => 'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js'}
    = javascript_include_tag 'application'
    = csrf_meta_tags
  %body
    .grid-frame.vertical
      .title-bar
        = link_to image_tag('logo.png', size: '152x70'), root_url, class: 'center title'
      .grid-block
        #main.small-12.grid-block
          = yield
      - if person_signed_in?
        .grid-block.shrink
          .grid.content.small-12
            %ul.menu-bar
              %li
                %a{href: menu_items_url}
                  %img{icon: 'magnifying-glass', size: 'medium', 'zf-iconic' => ''} Coffees
              %li
                %a{href: orders_url}
                  %img{icon: 'document', size: 'medium', 'zf-iconic' => ''} Orders
              %li
                %a{href: people_url}
                  %img{icon: 'person', size: 'medium', 'zf-iconic' => ''} Account
              %li
                %a{href: cart_items_url}
                  %img{icon: 'cart', size: 'medium', 'zf-iconic' => ''} Checkout