CSS：Div可自动适应所有屏幕尺寸的页面底部

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

然后我使用bootstrap，其中包含max-width的所有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();
    });
}