Question

我有一个页面，其正文使用背景大小：覆盖图像。我希望我的页脚停留在页面的底部（不粘;只是在页面的底部）。问题是页脚只停留在原始图像大小的底部，因此当窗口大小调整为大于原始图像大小时，页脚会保留在其下方的边距。我尝试了许多事情都没有成功。这是我的HTML：

<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;
}

Answer 1

我在正文中的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

这适合你吗？

父母使用背景大小时如何定位页脚：封面

1 个答案: