粘性頁腳不粘在AngularJS

我正在工作的角度網站和即時通訊嘗試實現跨所有視圖的粘腳，但當內容超出窗口大小和滾動條出現時，頁腳停止粘貼。我已經嘗試了一堆不同的東西，比如在我的所有內容中添加一個包裝，添加一個.push div，但似乎沒有任何工作。有沒有人遇到這個問題，並修復它或知道某種插件等我可以用來使這項工作？ with my current css/html this is what happens on pages where content exceeds the size of the window 粘性頁腳不粘在AngularJS

這裏是我的代碼：

<body ng-app="noteSnapApp"> 
<!--[if lt IE 7]> 
    <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p> 
<![endif]--> 

<!-- Add your site or application content here --> 
    <div style="min-height: 55px;" ng-controller="NavCtrl" class="navbar navbar-default navbar-static-top ns-navbar ns-hide-nav"> 
     <div class="container"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
      <span class="sr-only">NoteSnap</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a style="padding: 0" class="navbar-brand" href="/feed"><img class="img-responsive" src="images/notesnap_logo.png" width="165"></a> 
     </div> 
      <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav navbar-right"> 
       <li ng-hide="logoutBtn" class="ns-logout"><a ng-click="logOut()" href="">Logout</a></li> 
      </ul> 
      </div> 
     </div> 
    </div> 

    <div ng-view></div> 

    <div class="banner-footer"> 
     <a href="http://bit.ly/1ul3gG7"><img class="img-responsive" src="images/banner.png" width="100%"></a> 
    </div> 

     <div id="fb-root"> 
     </div> 
</body>

而且我的CSS：

html, body {height: 100%;} 
html{ 
font-family: 'museo_sans100'; 
color: #333333; 
position: relative !important; 
min-height: 100%; 
} 

body { 
background-color: transparent; 
margin-bottom: 90px; 
} 

.banner-footer { 
position: fixed; 
bottom: 0; 
width: 100% ; 
height: 90px; 
clear: both; 
}

的任何和所有的建議都歡迎和讚賞，即時通訊也願意嘗試的jQuery/JavaScript的解決方法，基本上任何作品！

來源

2014-10-04 Saleh

它相對定位成由於視口'固定'定位。在這種情況下，嘗試使用'absolute'來代替''，這是最靠近的祖先，它的位置是'relative'。 – 2014-10-04 22:25:15

沒有任何例子使用角材料1.0。我有同樣的問題，其中頁腳在初始化時貼在底部，但當內容長度超過屏幕高度時，它會一直滾動。 – 2016-09-26 03:14:53

也有Bootstrap solution，它並不真正需要安裝引導框架，只是結構如下：

HTML：

<!-- Begin page content --> 
<div class="container"> 
    <div class="page-header"> 
    <h1>Sticky footer</h1> 
    </div> 
    <p class="lead">Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.</p> 

</div> 

<div class="footer"> 
    <div class="container"> 
    <p class="text-muted">Place sticky footer content here.</p> 

    </div> 
</div>

CSS：

/* Sticky footer styles 
-------------------------------------------------- */ 
html { 
    position: relative; 
    min-height: 100%; 
} 
body { 
    /* Margin bottom by footer height */ 
    margin-bottom: 60px; 
} 
.footer { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    /* Set the fixed height of the footer here */ 
    height: 60px; 
    background-color: #f5f5f5; 
} 


/* Custom page CSS 
-------------------------------------------------- */ 
/* Not required for template or sticky footer method. */ 

.container { 
    width: auto; 
    max-width: 680px; 
    padding: 0 15px; 
} 
.container .text-muted { 
    margin: 20px 0; 
}

繼承人a working Fiddle用長文本顯示頁面滾動時的行爲。

來源

2014-10-04 23:03:47 jsfrocha

謝謝先生！我以爲我曾嘗試過這種解決方案，但有時CSS可以是一個痛苦的屁股 – Saleh 2014-10-06 19:06:48

我發現解決方案從Javascript與window.innerHeight工作，並設置marginTop和marginBottom太。我希望這對你有所幫助。

來源

2015-04-08 17:55:41 Eisson

這裏是一個角度指令，建立對角粘頁腳從該頁面採取： https://github.com/incuna/angular-sticky-footer/blob/master/angular-sticky-footer.js

<body> 
    <div class="wrapper"> 
     <!-- All other content in here. --> 
    </div> 

    <div class="footer" sticky-footer=".wrapper"></div> 
</body>

(function (angular) { 
    'use strict'; 

    var module = angular.module('sticky-footer', []); 

    module.directive('stickyFooter', [ 
     '$timeout', 
     function ($timeout) { 
      return { 
       restrict: 'A', 
       link: function (scope, iElement, iAttrs) { 
        var stickyFooterWrapper = $(iAttrs.stickyFooter); 

        // Quite often you will occur a few wrapping `<div>`s in the 
        // top level of your DOM, so we need to set the height 
        // to be 100% on each of those. This will also set it on 
        // the `<html>` and `<body>`. 
        stickyFooterWrapper.parents().css('height', '100%'); 
        stickyFooterWrapper.css({ 
         'min-height': '100%', 
         'height': 'auto' 
        }); 

        // Append a pushing div to the stickyFooterWrapper. 
        var stickyFooterPush = $('<div class="push"></div>'); 
        stickyFooterWrapper.append(stickyFooterPush); 

        var setHeights = function() { 
         var height = iElement.outerHeight(); 
         stickyFooterPush.height(height); 
         stickyFooterWrapper.css('margin-bottom', -(height)); 
        }; 

        $timeout(setHeights, 0); 
        $(window).on('resize', setHeights); 
       } 
      }; 
     } 
    ]); 
}(window.angular));

來源

2015-08-14 10:58:38 dutchman711

(function() { 
    'use strict'; 

    angular.module('myApp').directive('footerStick', function() { 
    return { 
     restrict: "E", 
     templateUrl: "app/somewhere/footer.html", 
     link: function (scope, el, attrs) { 
     var win = angular.element($('html')); 
     scope.$watch(function() { 
      return win[0].offsetHeight; 
      }, 
      function (newValue, oldValue) { 
      var newHeight = newValue + 60; 
      $(el[0].firstElementChild).css('top',newHeight); 
      }); 
     } 
    }; 
    }) 
}());

這將使你的底部（60英尺） px用於放置元素本身，如果它更長，則可能需要調整它）。您需要在頁腳元素上具有CSS屬性「position：absolute」。當窗口被調整大小或運行時出現新元素時，它仍然應該在底部。

來源

2016-08-11 11:38:21 vvn050

，在角材爲我工作的唯一解決方案> 1.0低於

CSS

body { 
width: 100%; 
height: 100%; 
display: flex; 
flex-direction: column; 
flex-wrap: nowrap; 
} 


.main{ 
    flex-grow: 1; 
    overflow: auto; 
    min-height: 2em; 
}

的Html

<body > 
<navbar></navbar> 
<div class="main" ui-view=""></div> 
<footer></footer> 
</body>

來源

2016-09-26 03:44:51

這是迄今爲止最優雅的解決方案，除了......在我的情況下，這隻適用於我不使用角度。似乎以某種方式禁用flex容器？ – Kokodoko 2016-11-28 10:17:00

粘性頁腳不粘在AngularJS

回答

相關問題