如何使充满页面和页脚的背景图像粘贴到页面底部？

我正试图构建一个网页来显示一篇文章，它是由bootstrap框架提供支持的。该页面有一个顶部导航栏和一个侧边栏。主要内容放在一个容器中。我有一个背景图像，它不会随着页面滚动而移动。导航条固定在顶部

由于我想使背面图像半透明，我做了很多工作，现在结构有点混乱。另外，我想让页脚粘在页面底部，而不是浏览器底部。现在的问题是，随着物品长度的变化，容器如何调整其高度？我尝试设置高度：100%，但没有用

这就是我想要的：

|____nav_______|
| |      ||    |
| |      ||side|
| |      || bar|
| |______||    |
|_________|____|

但现在是这样的:

|______________|
| title  | |   |
| |    | | |   |
|_|    |_| |   |
| |____| | |   |
|________|_|___|

这是我的标记的一部分：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">... </nav>

<div class="sidebar"></div>

<div class="container-back">
    <div class="back"></div>

    <div class="container">
        <div class="col-lg-9" role="main" id="content">
            <div>
                <div class="post">
                    <div class="post-header">
                        <div class="post-title"></div>
                        <div class="post-header-buttom">
                            <div class="post-timestamp"></div>
                            <div class="post-tag"></div>
                        </div>
                    </div>

                    <div class="post-body font-kai">
                        content
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<footer class="panel-footer">Copyright</footer>

你应该：

将

position:relative

添加到

container back

而不是

container

，因为它是绝对定位元素

back的父元素

在

页脚

前面添加一个额外的关闭标记，以关闭“容器返回”

---

最后，我必须通过所有的代码，并做一个大的改变。 这可以完美地解决问题：

.container-back{
position: relative;
margin-top: 52px;
min-height: 1000px;
height: 100%;
width: auto;
z-index: 0;}
.back{
position: absolute;
display: block;
width: 100%;
height: 100%;
margin-left: 0px;
margin-right: 0px;
background: url(images/back.png);
background-attachment: fixed;
background-repeat: repeat-y;
opacity: 0.35;
z-index: 0;}
.container{
/*padding-top: 52px;*/
height: 100%;
margin-left: 5px;
margin-right: 5px;
width: auto;
z-index: 1;}
.col-lg-9#content{
height: 100%;
min-height: 1000px;
margin-left: 5px;
margin-right: 5px;
margin-top: 0px;
padding: 15px;
background: rgba(255,255,255,0.9);
/*z-index: 1;*/}
.panel-footer{
position: absolute;
bottom: 0px;
padding: 0px;
padding-top: 3px;
width: 100%;
background: #333;
text-align: center;
font-size: small;
color: #5fdedd;
z-index: 1;
height: 25px;
line-height: 20px;}

---

你能帮个忙吗？对不起。我是HTML新手，我真的不懂小提琴。我已经在谷歌上搜索过了，我会试一试。请一次问一个问题。简化和澄清，并在需要时提出单独的问题。

.container-back{
position: relative;
margin-top: 52px;
min-height: 1000px;
height: 100%;
width: auto;
z-index: 0;}
.back{
position: absolute;
display: block;
width: 100%;
height: 100%;
margin-left: 0px;
margin-right: 0px;
background: url(images/back.png);
background-attachment: fixed;
background-repeat: repeat-y;
opacity: 0.35;
z-index: 0;}
.container{
/*padding-top: 52px;*/
height: 100%;
margin-left: 5px;
margin-right: 5px;
width: auto;
z-index: 1;}
.col-lg-9#content{
height: 100%;
min-height: 1000px;
margin-left: 5px;
margin-right: 5px;
margin-top: 0px;
padding: 15px;
background: rgba(255,255,255,0.9);
/*z-index: 1;*/}
.panel-footer{
position: absolute;
bottom: 0px;
padding: 0px;
padding-top: 3px;
width: 100%;
background: #333;
text-align: center;
font-size: small;
color: #5fdedd;
z-index: 1;
height: 25px;
line-height: 20px;}