Липкий нижний колонтитул, не торчащий в AngularJS

Im работает с угловым сайтом и им пытается реализовать липкий нижний колонтитул на всех видах, но нижний колонтитул перестает прилипать, когда содержимое превышает размер окна и появляется полоса прокрутки. Я пробовал кучу разных вещей, таких как добавление обертки вокруг всего моего контента, добавление div .push, но ничего не работает. Кто-нибудь сталкивался с этой проблемой и исправлял ее или знал какой-то плагин и т. Д. Я могу использовать эту работу? 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'. –

Ни один из примеров не работает с угловым материалом 1.0. У меня та же проблема, в которой нижний колонтитул вставлен на дно на init, но затем прокручивается, когда содержимое больше, чем высота экрана. –

Существует также 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; 
}

Heres a working Fiddle с длинным текстом, чтобы показывать поведение при прокрутке страницы.

источник

2014-10-04 23:03:47 jsfrocha

спасибо, сэр! я думал, что я пробовал это решение, но иногда css может быть болью в da ass – Saleh

Я нашел решение, работающее с 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

Липкий нижний колонтитул, не торчащий в AngularJS

ответ

Смежные вопросы