css - 如何拉伸(stretch)背景内容？

Question

前段时间我开始学习 HTML 和 CSS。出于学习和实践的目的，我正在尝试创建一个简单的游戏 Web 应用程序。我的应用程序的主界面非常简单，仅包含一个页眉、一个带有登录名的内容区域和一个页脚。为了演示我希望我的应用程序是什么样子，这里有一张图片:

IMAGE , MIRROR 1 , MIRROR 2 .

在我开发具有样式的 HTML 页面的过程中，我遇到了这个:

IMAGE , MIRROR 1 , MIRROR 2 .

现在困扰我的是因为出现了大片空白。我希望这个地方消失，让背景占据它(“conteudo”div)。这是我的 HTML 文档的主体:

<div id="conteiner">

        <!-- CABEÇALHO -->
        <div id="cabecalho">
            <div class="centro">

                <div id="logo">

                    BANCO DE DADOS <span>- FINAL FANTASY VIII</span>

                </div>

            </div>          
        </div>

        <!-- CONTEÚDO -->
        <div id="conteudo">
            <div class="centro">

                CONTEÚDO

            </div>  
        </div>

        <!-- RODAPÉ -->
        <div id="rodape">
            <div class="centro">

                <div id="rodape-imagem">
                    <img src="recursos/imagens/griever.png" alt=""/>
                </div>

                <div id="rodape-autor">
                    DESENVOLVIDO POR <span>R.D.S.</span>
                </div>

            </div>  
        </div>

    </div>

这是我的 CSS 样式表:

@font-face
{
    font-family: "Runic";
    src: url(../recursos/fontes/RUNIC.TTF);
}

*
{
    margin: 0;
    padding: 0;
}

html , body 
{
    height:100%;
}

#conteiner
{
    min-height: 100%;
    position: relative;
}

#cabecalho
{
    background: linear-gradient(rgb(29,33,38) , rgb(19,22,26));

    height: 100px;
}

#logo
{
    font-family: Runic;
    font-size: 30px;

    color: white;

    line-height: 100px;
}

#logo span
{
    color: rgb(153,179,206);
}

#conteudo
{
    background: linear-gradient(rgb(28,33,38) , rgb(38,44,51));

    height: 200px;
}

#rodape
{
    background: linear-gradient(rgb(29,33,38) , rgb(19,22,26));

    width: 100%;
    height: 75px;
    position: absolute;
    bottom: 0;
    left: 0;
}

#rodape-imagem
{
    float: left;

    position: relative;
    left: 15px;
}

#rodape-autor
{
    font-family: EngraversGothic BT;
    color: rgb(153,179,206);

    position: relative;
    left: 30px;

    line-height: 75px;
}

#rodape-autor span
{
    color: white;
}

.centro
{
    width: 900px;

    margin-top: 0;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 0;

    border: 1px solid white;
}

谁能帮我解决这个问题，并解释这种可能的解决方案的原因？

谢谢!

编辑 - (20/03/2014)

我想我的问题不够清楚，所以我正在编辑以使其更清楚，以便更好地理解和解决。

如果您查看第二张图片，您会看到一个空白区域。我希望这个地方被 div“conteudo”的背景填满。这个 div 使用线性渐变绘制背景。我的意图是让这个 div 始终放在页眉 (cabecalho) 之后，并且始终对页脚 (rodape) 具有大小限制，即，当页脚开始时它的高度已经结束。即使用户调整页面大小，它也应该保持这种状态。这个功能有可能实现吗？

我修改了“container”和“content”如下:

    /* ROOT */

#conteiner
{
    height: 100%;

    position: relative;
}

/* CONTENT */   

#conteudo
{
    height: 100%;

    background: linear-gradient(rgb(28,33,38) , rgb(38,44,51));

    border: 1px solid red;
}

我的背景增加了高度，但是，它超过了页脚，完全失去了布局。

Answer 1

您指的是页脚上方的空白区域吗？如果是这样，那是因为你给了页脚 position:absolute。所以它会粘在相对位置的容器底部。