footer底部問題

2021-08-14 20:41:19 字數 662 閱讀 2186

在我們編寫頁面時,有時會遇到內容不足時,想固定底部的東西會上移了。其實我們想要達到的效果是,內容不足時,固定在底部,內容多時跟著頁面會撐到下面去(好像有點繞,不知道說清楚沒,下面看效果)

首先頁面布局(固定套路):

class="main">

div>

div>

class="footer">

div>然後樣式

*body,

html

.main

.footer

這時效果如圖:

然後我們再加足夠多的內容

就是這樣,內容多的時候就跟著會撐下去,我記得最開始寫頁面的時候在這上面糾結好久。

另外有時是想在底部固定乙個圖示,距離頁面底部也有距離,那麼就相應的更改 .main 的padding-bottom 和 底部圖示的樣式即可。如果一直想固定在底部,不跟著滾動,那麼就 position: fixed; ,沒什麼好說的啦。

footer固定底部 HTMLCSS方法

charset utf 8 footer始終居於底部title type text css body 核心 html,body,wrap高度100 html,body,wrapage 外框高度自動,最小高度100 ie下高度100 wrapage 內容主體下padding 防止底部疊加 mainw ...

footer貼在底部的布局

這個網頁即使內容很少的情況下,它也始終在頁面的底部。否則頁面底部將留下大量空白。footer位置自適應 div id wrap div id main class clearfix div id content cccdiv div id side sssdiv div div div id foo...

pc端footer固定在底部

問題 在pc端中我們的底部導航如果內容不夠或者換了螢幕就會出現底部導航亂掉,我去調研了一些官網,發現有的他們的導航是沒有固定在底部的,而是隨著內容的減少,導航會自動的提公升到頁面的頂部,而有的導航是固定在底部的,無論你的內容有多少,它都是在你的底部,接下來我就直接上 header 11111 111...