vue專案設定footer始終處於頁面底部

2021-09-25 09:10:46 字數 720 閱讀 9370

相信很多前端開發工程師會遇到這樣乙個問題:在我們開發也免得時候總是會把footer部分元件化,但是由於我們的開發頁面內容不夠,這時候我們會想到採用定位的方式,但是當我們的頁面的高度超過頁面的高度的時候這種定位的方式很顯然是存在問題的。

就像上面這種頁面高度不夠footer在中間。

接下來給提供一種我自己在vue-cli腳手架搭建的專案用flex布局實現這種footer始終在底部的效果。

首先我們先了解頁面的布局**:vue專案的頁面**:

section

footer

css樣式的的**:

html,body

.header

.section

.footer

基本的布局就是這樣,但是我們會發現按照這個樣式寫了,但是在我們的vue專案中還是沒有footer始終在底部的效果。
position:absolute;

CSS 設定Footer始終在頁面底部

footer顧名思義頁尾,如果內容多的時候在底部時感官很好,但是當內容變少 無法撐開一屏的時候 footer不固定在底部,影響美觀,對於已經從事前端工作的工作的來說應該是比價工作中入門級別的問題了,由於本人前端水平有限,耗費一點時間最後通過負邊距實現了這個簡單的功能,如下 flyelephant 設...

CSS 設定Footer始終在頁面底部

footer顧名思義頁尾,如果內容多的時候在底部時感官很好,但是當內容變少 無法撐開一屏的時候 footer不固定在底部,影響美觀,對於已經從事前端工作的工作的來說應該是比價工作中入門級別的問題了,由於本人前端水平有限,耗費一點時間最後通過負邊距實現了這個簡單的功能,如下 flyelephant 設...

css讓footer始終位於頁面的最底部

提出問題 怎麼讓footer定位在頁面底部,要求主體內容少的時候footer在視覺化視窗的最下方,主體內容非常多的時候 footer在主體內容的下面?嘗試解決 方法1.如果把footer直接放在主體內容後面,讓主體撐開把footer撐到下面去,主體內容多了可以,但是內容少了的話 footer撐不起來...