Question

我在一个有角度的网站上工作，我试图在所有视图中实现粘性页脚，但当内容超出窗口大小并且滚动条出现时，页脚会停止粘贴。我尝试了很多不同的东西，比如在我的所有内容中添加一个包装器，添加一个.push div，但似乎没什么用。有没有人遇到过这个问题并修复它或者知道某种插件等我可以用来做这个工作吗？ with my current css/html this is what happens on pages where content exceeds the size of the window

这是我的代码：

<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解决方法，基本上任何有用的东西！

Answer 1

还有Bootstrap solution，它不需要安装Bootstrap框架，只需要以下结构：

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用于显示页面滚动时的行为。

Answer 2

在角度材料＆gt; 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>

Answer 3

我发现该解决方案使用window.innerHeight的Javascript工作，并设置marginTop和marginBottom。我希望这能帮到你。

Answer 4

(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);
          });
      }
    };
  })
}());

这会将您的页脚放在底部（60px用于放置元素本身，如果它更长，则可能需要调整它）。你需要在页脚元素上有css属性“position：absolute”。当窗口调整大小或在运行时出现新元素时，它仍应位于底部。

粘滞的页脚没有粘在AngularJS中

4 个答案: