Question

前段时间我开始研究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>

这是我的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;
}

任何人都可以帮助我，并解释这种可能的解决方案的原因吗？

谢谢！

编辑 - （2014年3月20日）

我想我的问题不够明确，所以我正在编辑以使其更清晰，更容易理解和解决。

如果你看第二张照片，你会看到一个空白区域。我希望这个地方充满了div“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;
}

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

Answer 1

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

Answer 2

这里的关键概念是Visual formatting model，了解更多信息，您将解决您的神秘问题。

简单的解决方案是：给你的content div一个固定的高度。

如何拉伸背景内容？

编辑 - （2014年3月20日）

2 个答案: