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

然后我使用包含最大宽度的所有 CSS 的 Bootstrap 。

.container {
    width: 1170px;
}

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

Answer 1

您需要添加位置以及高度和宽度:

height: 100%;
width: 100%;
position: fixed;