圖像不會粘在頁面底部

Question

我得到了這個設計，我正在嘗試申請我的網站。 請注意， <html>元素有一個背景圖像（雙手在空中），它粘在頁面底部。

但是，當我將css文件遷移到我的應用程序時，由於某種原因，此圖像顯示在頁面的中間位置。 我檢查了相關的CSS，在兩種情況下都是：

html {
 background-attachment: fixed;
    background-clip: border-box;
    background-color: transparent;
    background-image: url("../../img/bg.svg");
    background-origin: padding-box;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    outline: 0 none !important;
}

那么，為什么像粘在頁面的底部在這里，但中途會顯示在網頁這里。

Answer 1

你有height: 100%為你的html和body 。 這通常是為了能夠具有全高度元素。 但在這種情況下，這被證明是問題的原因。 刪除它可以解決問題。

檢查Firebug或Chrome Inspector，您會看到以下內容：

html, body {
    height: 100%;
}

去掉它。 或者從樣式表中覆蓋它。

Answer 2

由於body { height: 100% }樣式，它不能在第二個站點上運行。

靜態/捆bundle_responsive_head.css：

html, body {
    height: 100%;
}

Answer 3

看起來第一個鏈接的計算高度被設置為使得圖像位於底部，而對於圖像看起來部分向下的鏈接，計算的高度要低得多。 height: 170px; 與height: 2006px;相比height: 2006px;

~~我不確定是什么設置了你的高度，但排除它將解決你的圖像問題~~

編輯：實際上它似乎在這個規則中只在其中一個網站上：

media="screen, projection"
html, body {
   height: 100%;
}

Answer 4

它看起來實際上是身體標簽上的背景圖像沒有粘到底部。 關閉height: 100% bundle-bundle-responsive-head.css中的height: 100%正文規則修復了它，但我不確定這將如何影響網站上的其他內容。

我通過在Chrome中使用DOM檢查器並打開/關閉各種元素的規則來查看它會產生什么效果。

圖像不會粘在頁面底部

問題描述

4 個解決方案

解決方案1
4 2012-12-01 17:16:59

解決方案2
3 2012-12-01 17:15:09

解決方案3
2 已采納 2012-12-01 17:14:38

解決方案4
2 2012-12-01 17:16:19

圖像不會粘在頁面底部

問題描述

4 個解決方案

解決方案1 4 2012-12-01 17:16:59

解決方案2 3 2012-12-01 17:15:09

解決方案3 2 已采納 2012-12-01 17:14:38

解決方案4 2 2012-12-01 17:16:19

解決方案1
4 2012-12-01 17:16:59

解決方案2
3 2012-12-01 17:15:09

解決方案3
2 已采納 2012-12-01 17:14:38

解決方案4
2 2012-12-01 17:16:19