CSS：股利自动适合所有的屏幕页面底部的大小

Question

基本上我目前所面对的是这样的： -

黑色矩形是我想延长div元素到页面的底部，所以无论您使用哪种屏幕分辨率，它都会位于底部。黑色背景的div会用图像来代替（如果可能的话，我不希望被扭曲的形象。）

目前我的代码是： -

HTML

<div id="main-container" class="container"> 

    <img style="width: 100%; height: 100%;" src="http://url.com/test.jpg" alt="" class="alignnone size-full wp-image-37" /> 

</div> 

CSS：

#main-container { 
    height: 100%; 
    background-color: #000; 
} 

.container { 
    margin-right: auto; 
    margin-left: auto; 
    padding-left: 15px; 
    padding-right: 15px; 
} 

然后我使用的引导，它包含所有的最大宽度的CSS。

.container { 
    width: 1170px; 
} 

目前，图像经过页面的底部，但我想包含在浏览器的底部。什么是实现这一目标的最佳方式？

Answer 1

你不能用CSS做到这一点。您需要使用Javascript来动态修改它检测到的CSS。我用的是这样的：

function setSizes() { 
    "use strict"; 
    var height = ($(window).height() - $("#top").height()) - 5, 
     fancytree_padding_text = $(".fancytree-container").css("padding-top"), 
     get_padding = new RegExp("(.*?)(px)"), 
     fancytree_padding = parseInt(get_padding.exec(fancytree_padding_text)[0], 10); 
    $(".fancytree-container").css("max-height", (height - (fancytree_padding * 2) - 5) + "px"); 
    $(".feeds").css("max-height", height + "px"); 
    $(".details").css("max-height", height + "px"); 
    $(".bottomPadding").css("padding-top", (height - ($(".bottomPadding p").height() + 55)) + "px"); 
setFeedWidths(); 
} 

我还添加代码来侦听调整大小和调用这个当文档加载：

$(function() { 
    "use strict"; 
    setSizes(); 
    $(window).resize(function() { 
     setSizes(); 
    }); 
}