我有一个页面，其正文使用 background-size:cover with an image。我希望我的页脚留在页面底部(不粘；就在页面底部)。问题是页脚只停留在原始图像大小的底部，因此当窗口的大小调整为大于原始图像大小时，页脚保持在原位，并在其下方留有边距。我尝试了很多事情都没有成功。这是我的 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;
}
最佳答案
我在正文中使用 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;
}
这对你有用吗？
关于html - 当 parent 使用背景大小 :cover 时如何定位页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21613465/