粘性頁腳與角度指令，路線，材料

我想實現古典粘性頁腳。我正在使用角1.4，ngRoute，ngMaterial等我已經嘗試過css解決方案（設置包裝，頁腳，html，body 100％）以及計算元素高度的jQuery函數，但沒有任何工作完美無缺。請注意，我不想爲頁腳設置一定的高度，然後計算剩餘空間。我希望它能對我的內容做出反應。粘性頁腳與角度指令，路線，材料

1）我們大多數解決方案，當主要內容區域小於高度時，我可以將其粘貼到底部。在這種情況下，主內容和頁腳（主體）之間有空白區域。我可以將身體的背景顏色設置爲等於ng-view的顏色，使其看起來相同。如果這是正確的，我不確定。

2）當主要內容變大，頁腳丟失（落在主要內容而不是向下滾動）。這與角度指令或路線有什麼關係，還是我缺少其他東西？您可以查看我的plunkr查看。點擊「主頁」以外的任何選項卡，即可看到底部有頁腳的空白頁面。點擊「家」，頁腳丟失。它實際上存在於內容之後。 p.s.我不想把我所有的代碼放在這裏，這是相當大的。如果您有任何問題，請參閱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>

來源

2015-06-07 Tsafou

一種選擇是使用引導粘頁腳 http://getbootstrap.com/examples/sticky-footer-navbar/

來源

2015-06-07 02:08:35 n00b

它關係到你使用的角度材質庫，它依賴於Flexbox的。查看this網站了解如何使用Flexbox框架添加頁腳。

要輕鬆解決您的問題，您可以在具有「網站內容」類的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>

來源

2015-06-07 02:43:55 rcheuk

沒有任何解決方案似乎工作。如果我把腳註放在沒有設定高度的div的「網站內容」中，我只在主文本的末尾找到頁腳。如果我使用最小高度，那麼它不再響應。這個數字取決於屏幕高度。 bootstrap粘腳沒有任何幫助。它將頁腳設置爲最後，但是當更多內容添加到主文本時，頁腳會丟失在主內容後面。有什麼想法嗎？ – Tsafou

你是什麼意思，它不再響應？最小高度應設置默認高度，以便頁腳不直接位於導航下方，但它應根據需要垂直增長。如果您打算使用引導庫，則需要使用引導程序的響應式框架才能正常工作。有幾個角度兼容的引導程序實現 - 我會探索那些如果你走引導路線。 – rcheuk

也許你錯過了我在主要帖子上的編輯。我說過，這可以在Firefox上運行，但不能在Chrome上運行。在Firefox上，頁腳處於底部，隨着主要內容的增長，頁腳向下滾動。另一方面，在頁面底部，頁腳從底部開始，但在主要內容隨着它的增長而落後......任何想法？ – Tsafou

粘性頁腳與角度指令，路線，材料

回答

相關問題