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

你应该：

将position: relative添加到container-back而不是container，因为它是绝对定位元素的父元素back
在</dig>之前添加额外的结束footer标记以关闭`container-back

Answer 2

最后，我必须完成所有代码并进行重大更改。这可以完美地解决问题：

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

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

2 个答案: