頁腳應該在頁面底部/內容

我無法弄清楚如何讓頁腳粘到底部。如果內容小於尺寸頁腳應該在底部&如果內容大於窗口大小，頁腳應該在內容的結尾。我知道互聯網上有大量的材料，如何將腳註粘到底部。下面的代碼工作正常時，內容大：頁腳應該在頁面底部/內容

這裏是我的HTML：

<html> 
<body ng-cloak> 
    <notifications-bar class="notifications"></notifications-bar> 
    <div ng-controller="MainCtrl as main"> 
    <ng-include src="'app/layout/header.html'"></ng-include> 
    <div ng-view></div> 
    <ng-include src="'app/layout/footer.html'"></ng-include> 
    </div> 
    <spinner></spinner> 
</body> 
</html>

這裏是CSS：

* { 
    margin: 0; 
} 

html { position: relative; min-height:100%; 
} 

html, body { margin:0px; padding:0px; 
} 

.footer_body { 
    background-color: rgb(102, 102, 102); 
    margin:0px; 
    position: relative; 
    top: 0px; 
    bottom: 0px; 
    width: 100%; 
}

來源

2017-10-05 Sangeet Asati

爲了讓您的頁腳固定在底部，位置：固定;底部：0; –

您的頁腳位置應該absolute不relative和top -styling應除去。也許檢查出bootstraps sticky footer source code。不管你是否使用bootstrap，粘性頁腳的樣式都是一樣的。

下面是它的基本部分：

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
html { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 
body { 
 
    margin-bottom: 60px; /* height of footer */ 
 
} 
 
.footer_body { 
 
    position: absolute; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 60px; /* height of footer */ 
 
    background-color: rgb(102, 102, 102); 
 
}

<html> 
 
<body ng-cloak> 
 
    <notifications-bar class="notifications"></notifications-bar> 
 
    
 
    <div ng-controller="MainCtrl as main"> 
 
     <ng-include src="'app/layout/header.html'"></ng-include> 
 
     <div ng-view></div> 
 
    </div> 
 
    
 
    <footer class="footer_body"> 
 
     <ng-include src="'app/layout/footer.html'"></ng-include> 
 
    </footer> 
 
    <spinner></spinner> 
 
</body> 
 
</html>

來源

2017-10-05 20:09:14

謝謝。請再幫我一次。 –

如果您發現此問題可以解答您的問題，請考慮將其標記爲已回答。如果您有不同的問題，請隨時用它創建一個新問題，我會看看我能否提供幫助。 :-) –

您可以使用position: sticky這些天

演示筆https://codepen.io/D-Heap/pen/RjwEEr

也就是說，如果你並不需要太多向後兼容性（特別是對於IE）。 http://caniuse.com/#feat=css-sticky。

來源

2017-10-29 10:34:23 Mina

頁腳應該在頁面底部/內容

回答

相關問題