全屏幕圖片背景 - 頁腳室

我在這一塊上撞牆。我正在設計一個登錄頁面，其中有一個全屏幕圖片背景，停在頁腳處。所以基本上我相信我的麻煩在於創建一個粘腳。全屏幕圖片背景 - 頁腳室

我一直在關注教程this website。

這裏是我的HTML：

<!DOCTYPE html> 
<html> 
    <head> 
     <code omitted> 
    </head> 

    <body> 
    <div id="wrapper"> 
     <div id="bkgcontainer"></div> 
     <div class="push"></div> 
    </div> 

    <footer> 
     <address> 
      <code omitted> 
     </address> 
    </footer> 
    </body> 
</html>

我的CSS：

* { 
    margin: 0; 
} 
html, body{ 
    height: 100%; 
    background-color: black; 
} 
#wrapper { 
    width: 100%; 
    position: relative; 
    min-height: 100%; 
    margin: 0px auto -25px; 
} 
footer, .push { 
    height: 25px; 
} 

#bkgcontainer { 
    width: 100%; 
    height: 100%; 
    position: relative; 
    margin: 0 auto -25px; 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    display: block; 
} 

footer{ 
    text-align: center; 
    margin: 0px auto; 
    color: white; 
    position: relative; 
}

至於我可以告訴大家，我把一切都定好了。但是當我啓動網站時，'bkgcontainer'佔據了整個屏幕，並且'-25'的下邊距低於視口。我無所適從，有什麼想法？修復或更好的方式，我都耳熟能詳。

來源

2014-12-08 Cody

是你能熔酚醛樹脂有你的問題嗎？ – 2014-12-09 02:54:59

還沒有管理時間回到這個項目。我會在我回來後回覆。 – Cody 2014-12-09 15:39:22

你可以嘗試position:fixed的頁腳類

footer{ 
    text-align: center; 
    margin: 0px auto; 
    color: white; 
    position: fixed; 
    bottom:0; 
    width:100% 
}

來源

2014-12-08 04:50:32 ASR

你應該在#wrapper指定到任何一個較小的百分比值或最小像素值改變最小高度值，允許腳註來顯示。你所做的是告訴瀏覽器你希望div擴展不少於全屏。

來源

2014-12-08 04:51:02

可以使畫面背景佔90％的屏幕高度，使頁腳10％和引腳頁腳到頁面底部：

//remove `footer` 
.push { 
    height: 25px; 
} 

//set height to 90%; 
#bkgcontainer { 
    width: 100%; 
    height: 90%; 
    position: relative; 
    margin: 0 auto -25px; 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    display: block; 
} 

//change height to 10%, change to fixed position, and set bottom to 0. Oh, set width, too. 
footer{ 
    height: 10%; 
    text-align: center; 
    margin: 0px auto; 
    background-color: white; 
    position: fixed; 
    bottom:0; 
    width:100%; 
}

見this jsfiddle來看看它的外觀。

來源

2014-12-08 04:54:24

這裏假設你把你的圖片放在'＃bkgcontainer' div中。 – 2014-12-08 04:56:42

這是一個完全不同的解決方案。請注意，它不包含你的代碼的修改，但是，它是一個完全不同的解決方案（從幾個解決方案），以獲得頁眉和頁腳

HTML：

<header> 
    this is header 
</header> 
<div id="content"> 
    hello 
</div> 
<footer> 
    this is footer 
</footer>

CSS：

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
header { 
    width: 100%; 
    height: 60px; 
    background: green; 
    position: fixed; 
    top: 0; 
} 
#content { 
width: 100%; 
    height: 100%; 
    background-image: url("http://cdn.wonderfulengineering.com/wp-content/uploads/2014/07/Beautiful-Wallpapers-7.jpg"); 
    background-size: 100%; 
} 
footer { 
    width: 100%; 
    height: 60px; 
    background: blue; 
    position: fixed; 
    bottom: 0; 
}

這裏的小提琴：http://jsfiddle.net/harshulpandav/7S4Xx/214/

來源

2014-12-08 05:01:57

全屏幕圖片背景 - 頁腳室

回答

相關問題