Question

我知道这个问题已被多次询问，但没有一个答案解决了我的情况。这是一个演示http://jsfiddle.net/eyuxt3zz/18/，我需要#marketing_logo div背景图像应该扩展到100％并与页脚div相切。如果我使用dispaly:absolute将#content div设置为100％，则页脚将不会保持其最低位置。我尝试了一些解决方案，但是当另一个div也设置为position: absolute时，我无法弄明白如何将页脚保持在页面底部。

背景的高度现在设置为300像素，因此内容div不会显示为空。

所以问题是如何使#marketing_logo div背景大小为100％并将页脚div保持在底部。页脚div设置为绝对位置，以便它始终位于页面底部。

谢谢！

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

Answer 1

试试这个：

#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;
  margin: 0 -15px -150px -15px;
  width: 100%;
      height: 100%;
      top: 0px;
      left: 0px;  
      position: fixed;
}

Answer 2

这是一个例子，我不确定这是你在寻找什么？ Example codepen

body,html{
height:100%;
}

#wrapper{
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -150px; /* minus the height of the footer */
}

#marketing_logo{
background: url('http://www.canvaz.com/portrait/charcoal-1.jpg') no-repeat center center;
height:100vh;
width:100%;
background-size:100%;
}

#push, footer{
height:150px; /* height of the footer */
clear:both;
}

footer{
background:#BBBBBB;
}

Answer 3

我会用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的高度。

将背景设置为100％高度并将页脚保持在页面底部

3 个答案: