Css 如何拉伸背景内容？

不久前，我开始学习HTML和CSS。出于学习和实践的目的，我正在尝试创建一个简单的游戏web应用程序。我的应用程序的主界面非常简单，只包含一个页眉、一个带有登录名的内容区域和一个页脚。为了演示我希望我的应用程序的外观，下面是一张图片：

在开发带有样式的HTML页面的过程中，我遇到了以下问题：

现在困扰我的是出现了巨大的空白。我希望这个地方消失，背景占据它（“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>

有人能在这方面帮助我，并解释这种可能的解决方案的原因吗

谢谢

编辑-（20/03/2014） 我想我的问题还不够清楚，所以我正在编辑以使它更清楚，更容易理解和解决

如果你看第二张图片，你会看到一个空白。我希望这个地方能有“conteudo”的背景。此div使用线性渐变绘制背景。我的意图是使这个div总是放在页眉（cabecalho）之后，并且总是对页脚（rodape）有大小限制，即页脚开始时其高度超过。即使用户调整页面大小，它也应该保持这种状态。该功能是否可以实现

我将“容器”和“内容”修改如下：

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

---

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

你指的是页脚上方的空白吗？如果是这样，那是因为你给了页脚位置：绝对。因此，它将以相对位置粘在容器底部。

这里的关键概念是，了解更多有关它的信息，您将解决您的神秘问题

---

简单的解决办法是：给你的

内容分区一个固定的高度。
Hmm。。出于什么原因，我会给我的内容div指定一个固定的高度？投入其中的内容将是动态的。此外，用户可以按住键盘上的控制键并使用鼠标滚轮更改页面尺寸，从而更改内容区域，对吗@Loa那么我猜您必须使用Javascript动态控制高度，但是页脚应该配置为保持在页面底部。毕竟，这是脚注，不是吗？然后简单地给CONTEÚDO div一个高度
    /* 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;
}