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

Question

我正在使用以下代码尝试在我们的web应用程序底部实现一个修复菜单栏，就像你在标准iOS应用程序中常见的那样。唯一的问题是，当内容扩展到窗口的边界时，菜单会被向下推

!!!
%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

通过将菜单更改为类似下面的网格块来解决问题

!!!
%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