Bootstrap 4 - 粘性頁腳 - 動態頁腳高度

我需要在頁面上放置粘性頁腳，但是我沒有爲頁腳設置一個確定的高度。在較小的屏幕上 - 行的大小調整和頁腳變長。Bootstrap 4 - 粘性頁腳 - 動態頁腳高度

因此，getbootstrap上提供的默認粘性頁腳示例不起作用，因爲它需要固定的頁腳高度。

任何方式來實現這個？

/* 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; 
    line-height: 60px; /* Vertically center the text there */ 
    background-color: #f5f5f5; 
} 


/* Custom page CSS 
-------------------------------------------------- */ 
/* Not required for template or sticky footer method. */ 

body > .container { 
    padding: 60px 15px 0; 
} 

.footer > .container { 
    padding-right: 15px; 
    padding-left: 15px; 
} 

code { 
    font-size: 80%; 
}

來源

2017-08-28 Sam.tuver

的可能的複製[如何使流體粘性頁腳]（https://stackoverflow.com/questions/16901707/how-to-make-a-fluid-sticky-footer） –

使用min-height而不是高度使它變高。

https://codepen.io/hunzaboy/pen/prxgRb

而且在較小的屏幕只是刪除絕對位置，並使其靜態的。

來源

2017-08-28 06:27:49 Aslam

這工作，但不是「走的路」，因爲BS4現在是flexbox。 – 2017-08-28 12:44:17

現在引導4 Flexbox的，粘頁腳是可以做到用...

<wrapper class="d-flex flex-column"> 
    <nav> 
    </nav> 
    <main> 
    </main> 
    <footer> 
    </footer> 
</wrapper> 

body, wrapper { 
    min-height:100vh; 
} 

main { 
    flex:1; 
}

演示：Bootstrap 4 Sticky Footer（4.0.0）

來源

2017-08-28 12:43:16 ZimSystem

不適用於IE11及更低版本 – Starwave

Bootstrap 4 - 粘性頁腳 - 動態頁腳高度

回答

相關問題