Chân trang dính không dính vào AngularJS

Im làm việc một vị trí góc cạnh và cố gắng triển khai chân trang dính trên tất cả các chế độ xem nhưng chân dừng dừng lại khi nội dung vượt quá kích thước cửa sổ và thanh cuộn xuất hiện. Tôi đã thử một loạt các thứ khác nhau, như thêm một wrapper xung quanh tất cả nội dung của tôi, thêm một div .push nhưng không có gì có vẻ hoạt động. Có ai đi qua vấn đề này và cố định nó hoặc biết một số loại plugin vv Tôi có thể sử dụng để thực hiện công việc này? with my current css/html this is what happens on pages where content exceeds the size of the window Chân trang dính không dính vào AngularJS

Đây là mã của tôi:

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

Và css của tôi:

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

Bất kỳ và tất cả các lời đề nghị được hoan nghênh và đánh giá cao, im cũng sẵn sàng thử jQuery/cách giải quyết javascript, về cơ bản bất cứ điều gì công trinh!

Nguồn

2014-10-04 Saleh

Nó vị trí tương đối so với khung nhìn vì của ' cố định' định vị. Hãy thử sử dụng 'tuyệt đối' thay vào đó, do đó, nó sẽ là vị trí đối với' 'trong trường hợp này, là tổ tiên gần nhất có vị trí' relative'. –

Không có ví dụ nào làm việc với vật liệu góc 1.0. Tôi có cùng một vấn đề trong đó footer dính xuống đáy trên init nhưng sau đó cuộn dọc khi nội dung dài hơn chiều cao màn hình –

Ngoài ra còn có các Bootstrap solution, mà không thực sự cần khuôn khổ Bootstrap cài đặt, chỉ cần cấu trúc sau:

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 với văn bản dài để hiển thị hành vi khi cuộn trang.

Nguồn

2014-10-04 23:03:47 jsfrocha

cảm ơn bạn! Tôi nghĩ rằng tôi đã thử giải pháp này nhưng đôi khi css có thể là một nỗi đau trong da ass – Saleh

Tôi đã tìm thấy giải pháp hoạt động từ Javascript với window.innerHeight và đặt marginTop và marginBottom. Tôi hy vọng điều này sẽ giúp bạn.

Nguồn

2015-04-08 17:55:41 Eisson

Đây là một chỉ thị góc mà xây dựng footer dính cho góc như lấy từ trang này: 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));

Nguồn

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

này sẽ đặt bạn footer ở phía dưới (với 60 px để đặt chính phần tử, nếu nó dài hơn, bạn có thể phải điều chỉnh nó). Bạn cần có thuộc tính css "position: absolute" trên phần tử chân trang. Khi cửa sổ được thay đổi kích thước hoặc các yếu tố mới xuất hiện vào thời gian chạy, nó vẫn sẽ ở dưới cùng.

Nguồn

2016-08-11 11:38:21 vvn050

Giải pháp duy nhất mà làm việc cho tôi trong tài liệu góc> 1.0 dưới

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>

Nguồn

2016-09-26 03:44:51

Đây là giải pháp thanh lịch nhất, ngoại trừ ... trong trường hợp của tôi chỉ hoạt động khi tôi không sử dụng góc cạnh. Có vẻ như bằng cách nào đó góc vô hiệu hóa các container flex? – Kokodoko

Chân trang dính không dính vào AngularJS

Trả lời

Các vấn đề liên quan