html - 如何使背景图像充满页面和页脚粘在页面底部？

Question

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

因为我想让背影半透明，我做了很多工作，现在结构有点困惑。另外，我想让页脚贴在页面底部，而不是浏览器的底部。现在的问题是，随着文章的长度变化，容器如何调整高度？我尝试设置 height: 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>

CSS:

.back {
    position: absolute;
    display: block;
    width: 100%;
    min-height: 2000px;
    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: -1;
}

.col-lg-9#content {
    height: 1500px;
    margin-top: 52px;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 0px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.9);
    z-index: 1;
}

.container {
    position: relative;
    height: 1500px;
    margin-left: 5px;
    margin-right: 5px;
    width: auto;
}

.container-back {
    margin-top: 52px;
    min-height: 100%;
    height: 100%;
}

.post {
    margin: 10px;
    padding: 10px;
}

Answer 1

你应该:

1. 添加position: relative至 container-back不是 container因为那是绝对定位元素的父元素 back
2. 添加一个额外的关闭</dig>在 footer 之前标记关闭`container-back