我知道这个问题已被问过很多次，但没有一个答案能解决我的问题。
这是一个演示 http://jsfiddle.net/eyuxt3zz/18/因为我需要 #marketing_logo div 背景图像应该扩展到 100% 并且与页脚 div 相切。
如果我使用 dispaly:absolute 将 #content div 设置为 100%，那么页脚将不会保持底部位置。
我尝试了一些解决方案，但我无法弄清楚当另一个 div 也设置为 position: absolute 时如何将页脚保持在页面底部。
背景的高度现在设置为 300 像素，这样内容 div 就不会显示为空。
所以问题是如何将 #marketing_logo div 背景设置为 100% 并保持底部的 footer div。页脚 div 设置为绝对定位，以便它始终位于页面底部。
谢谢!
演示 http://jsfiddle.net/eyuxt3zz/18/
html代码
<body>
<div id="page" class="pageContainer">
<div class="ppContainer">
<div id="container">
<div id="marketing_logo"></div>
</div>
</div>
<div id="footer">Footer</div>
</div>
</body>
CSS代码
html, body {
height:100%;
margin: 0;
}
.pageContainer {
min-height: 100%;
}
#marketing_logo {
background: url('http://www.canvaz.com/portrait/charcoal-1.jpg') no-repeat;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height:300px
}
#footer {
width: 100%;
height: 100px;
position: absolute;
left: 0;
bottom: 0;
background: #BBBBBB;
text-align: left;
padding-top: 10px;
}
最佳答案
我会用 JavaScript/jQuery 解决这个问题。这是您更新的 JSFiddle .
JavaScript 代码:
$(document).ready(function() {
// Calculate heigth
function calcHeight() {
var height = $(window).height() - $('#footer').height();
$('#marketing_logo').css('height', height);
}
// Auto call calcHeight on page load
calcHeight();
// Call calcHeight when the browser window resizes
$(window).resize(calcHeight);
});
我创建了一个名为 calcHeight 的小函数。我在页面加载和用户调整窗口大小时调用此函数。在此函数中，我计算页脚的高度和剩余高度(窗口的高度 - 页脚的高度)以更新您的 marketing_logo 的高度。
关于html - 将背景设置为 100% 高度并将页脚保持在页面底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32165822/