帶角度指令，路線，材質的粘性頁腳
[英]sticky footer with angular directives, routes, material
問題描述
我正在嘗試實現經典的粘性頁腳。 我正在使用angular 1.4，ngRoute，ngMaterial等。我嘗試了CSS解決方案（設置包裝器，頁腳，html，正文100％）以及用於計算元素高度的jQuery函數，但沒有任何問題可以完美地工作。 請注意，我不想為頁腳設置某個高度，然后計算剩余空間。 我希望它能夠響應我的內容。
1）我們大多數解決方案， 當主要內容區域小於高度時 ，我可以將其粘貼到底部。 在這種情況下，主要內容和頁腳（正文）之間存在空白區域。 我可以將主體的背景色設置為與ng-view的顏色相同，以使其看起來相同。 我不確定這是否正確。
2） 當主要內容變大時，頁腳將丟失 （移至主要內容后而不是向下滾動）。 這與角度指令或路由有關嗎，還是我錯過了其他東西？ 您可以檢查我的朋克歌手 。 單擊除“主頁”以外的任何選項卡，您會看到一個空白頁面，頁腳在底部。 單擊“主頁”，頁腳丟失。 它實際上在內容的后面。 ps我不想把我所有的代碼都放在這里，它很大。 如果您有任何疑問，請參閱plunkr或詢問我。
<body class="Site" ng-app="personalWebsite" ng-controller="mainController as main" style="display: flex; flex-flow: column nowrap;">
<div class="Site-content">
<tsafou-nav></tsafou-nav>
<md-content layout-padding ng-view></md-content>
</div>
<footer>
<tsafou-footer></tsafou-footer>
</footer>
</body>
*腳
<div class="footer">
<p>Design by<span>WOW</span></p>
</div>
我只是意識到以下代碼可在firefox上使用，而不能在chrome上使用！ 有人可以確認並提出解決方案嗎？
<body class="Site" ng-app="personalWebsite" style="display: flex; flex-flow: column nowrap;">
<div class="Site-content">
<tsafou-nav></tsafou-nav>
<md-content layout-padding="" ng-view=""></md-content>
</div>
<footer>
<tsafou-footer></tsafou-footer>
</footer>
2 個解決方案
解決方案1
0 2015-06-07 02:08:35
一種選擇是使用引導程序粘性頁腳http://getbootstrap.com/examples/sticky-footer-navbar/
解決方案2
0 2015-06-07 02:43:55
它與您使用的Angular Material庫有關，后者依賴於Flexbox。 查看此站點，了解如何使用Flexbox框架添加頁腳。
為了輕松解決問題，您可以在具有“ site-content”類的div類中移動頁腳。 如果要有一些空白空間，可以嘗試在具有最小高度的外部設置div。 所以它看起來像這樣：
<body class="Site" ng-app="personalWebsite" style="display: flex; flex-flow: column nowrap;">
<div class="Site-content">
<tsafou-nav></tsafou-nav>
<div style="min-height: 500px;">
<md-content layout-padding="" ng-view=""></md-content>
</div>
<footer>
<tsafou-footer></tsafou-footer>
</footer>
</div>
角材料制作粘性頁眉和頁腳
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.