将背景设置为100％高度，并保留页脚底部

我知道这个问题已被多次询问，但没有任何答案可以解决我的情况。这里是一个演示http://jsfiddle.net/eyuxt3zz/18/至极我需要的#marketing_logo div背景图像应该延伸到100％，并与页脚div相切。如果我使用dispaly:absolute将#content div设置为100％，那么页脚将不会保持其底部位置。我尝试了一些解决方案，但我不知道如何将页脚保留在页面底部，而另一个div也设置为position: absolute。将背景设置为100％高度，并保留页脚底部

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

所以问题是如何使#marketing_logo div背景的大小100％，并保持页脚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; 
}

来源

2015-08-23 sorin

寻求代码帮助的问题必须包含在问题本身**中重现**所需的最短代码。尽管您已经提供了一个示例链接，但如果链接无效，那么您的问题对于其他未来具有相同问题的SO用户将没有任何价值。 –

我认为JsFiddle有点破碎。您的CSS中包含'＃content'，但HTML中没有包含'id =“content”'的元素 –

试试这个：

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

来源

2015-08-23 11:08:20 JSB

下面是一个例子，我不知道这是什么你是厕所国王为？ 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; 
}

来源

2015-08-23 11:12:56 krunos

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

来源

2015-08-23 11:16:32

将背景设置为100％高度，并保留页脚底部

回答

相关问题