各位大大，在進行頁面設計時，如何有效的避免頁面下部出現多餘空白。?

01-09

如題。如何有效的避免頁面下部出現多餘空白。當然在此之前我已經定義全局padding和margin屬性為0，並且div的position屬性一般為relative，很少用absolute。

我想我明白題主的意思：當頁面內容的高度小於視口高度時，視口底部就是一片尷尬的空白（如圖一所示）。在這種情況下，我們往往期望頁腳是緊貼視口底部的（如圖二所示）。一般這種需求叫作「sticky footer」。把《緊貼底部的頁腳》這篇文章推薦給題主，它提供了 CSS2 和 CSS3 時代在解決這個問題時可以選擇的方案。（該文截取自《CSS Secrets》一書，上面的示意圖也取自該書。）

這種效果稱為Sticky Footer效果。

早期要兼容一些低版本瀏覽器，會考慮一些Hack來處理，這些Hack都受到一些條件性的限制，比如說要指定Footer的高度。由此擴展性不強。

隨著CSS的強大之後，有一些高級的CSS技術手段可以實現，比如說Flexbox(flexbox | 博客自由標籤) 可以實現。

那麼有關於這種效果實現的一些方法，感興趣的話可以看看：sticky footer

body {background:black}

我的解決方案是footer都相對於屏幕定位在底部，如果是pc端，相對於body或者.wrap之類的絕對定位，為了防止頁面較長，這個footer擋住其它的元素，還要在頁面低下加入一個和footer一樣高或者更高一點的透明元素，就是這樣

如果是超過一屏應該就不存在問題了，如果不夠一屏：

& & & & && & html,body{ height: 100%; } footer{ position: relative; height: 10%; top: 90%; /*background-color: black;*/ } & & & &

& & &

要不試試把 body 設置個最小高度？

給中間內容區域設置一個min-height？

用js給footer一個margin-top

HTML結構

& & &內容不夠一屏時footer緊貼在底部& & & && && & &

CSS樣式

html,body,.wrap{height:100%;} .wrap{ padding-bottom:55px; margin-bottom:-55px;} .footer{position:relative; top:-50px; height:50px; z-index:10;}

自己以前寫過，原理是這樣的，沒有測試，題主可以試試，下面是原理圖，略粗糙。