父母使用背景大小時如何定位頁腳：cover

我有一個頁面，其正文使用background-size：cover與圖像。我希望我的頁腳留在頁面的底部（不粘，僅在頁面的底部）。問題在於頁腳僅停留在原始圖像大小的底部，因此當窗口大小調整到大於原始圖像大小時，頁腳停留在其下方的空白處。我嘗試了許多沒有成功的事情。這裏是我的html：父母使用背景大小時如何定位頁腳：cover

<body> 
<form runat="server"> 
    <div class="contr"><div class="g01"></div></div> 
     <asp:ContentPlaceHolder ID="MainContent" runat="server" /> 
     <div style="clear: both;"></div> 
     <div class= "footer"></div> 
</form> 
</body>

，然後我的樣式規則：

body 
{ 
font-size: .80em; 
font-family: "Helvetica Neue", "Lucida Grande", "Segoe UI", Arial, Helvetica, Verdana, sans-serif; 
margin: 0px; 
padding: 0px; 
background: url(hex2.png) no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.hex2.png', sizingMethod='scale'); 
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.hex2.png', sizingMethod='scale')"; 
min-height:100%; 
} 

.footer 
{ 
width:94%; 
height:123px; 
background: url(lines.png); 
position: relative; 
bottom: 0; 
}

來源

2014-02-06 twinPrimesAreEz

你可以設置一個小提琴，顯示你遇到的問題？ – badAdviceGuy

設置小提琴使我意識到，我認爲我正在做我的腳註底部並沒有實際上把它放在身體的底部，只是最後一個元素的底部。 – twinPrimesAreEz

我在主體上實現頁腳在頁面background-size: cover，並沒有遇到問題。

HTML：

<div id="container"> 
    <h1>Lorem Ipsun</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
</div> 
<div id="footer"> 
    <p>Footer</p> 
</div>

CSS：

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    margin: 0px; 
    background: url(image.jpg) no-repeat center center fixed; 
    background-size: cover; 
} 

#container { 
    height: 100%; 
} 

#footer { 
    background: orange; 
    height: 100px; 
    margin-top: -100px; 
}

LIVE DEMO

這是否對你的作品？

來源

2014-02-06 21:39:31 elas

部分。這讓我意識到我身體內部沒有任何設置爲「身高= 100％」的東西。現在我的頁腳正好落在我最低的元素之下;現在我只需要弄清楚如何設置我的佈局，以便在擴展屏幕時背景不會低於我的最低元素 – twinPrimesAreEz

父母使用背景大小時如何定位頁腳：cover

回答

相關問題