How to stretch the background content? - css

Question

Some time ago I started studying HTML and CSS. For purposes of study and practice, I am trying to create a simple web application of a game. The main interface of my application is very simple, containing only a header, a content area with login, and a footer. For purposes of demonstrating how I want my application looks like, here is a picture:
IMAGE, MIRROR 1, MIRROR 2.
In my progress in the development of HTML page with styling, I just running into this:
IMAGE, MIRROR 1, MIRROR 2.
What's bothering me now is because of the large white space that appears. I wish this place would go away, and that the background occupy it (the "conteudo" div). Here is the body of my HTML document:
<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>
And here is my CSS stylesheet:
#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;
}
Can anyone help me on this, and explain the reason for such possible solution?
Thanks!
EDIT - (20/03/2014)
I guess my question was not clear enough, so I'm editing to make it more clear and susceptible to a better understanding and resolution.
If you look at the second picture you will see a blank space. I wish this place was filled by the background of the div "conteudo". This div paints a background with a linear gradient. My intention is to make this div always placed after the header (cabecalho), and always has the size limit to the footer (rodape), ie, its height is over when the footer begins. It should stay that way even if the user resize the page. This feature would be possible to be implemented?
I modified "container" and "content" as follows:
/* 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;
}
My background had increased height, however, it surpassed the footer, completely losing its layout.

Answer 1

Are you referring to the white space above the footer? If so, that's because you are giving the footer position:absolute. So it will stick to the bottom of the container with relative position.

Answer 2

The key concept here is Visual formatting model, learn more about it and you will solve your mysterious problem.
The plain solution is: give your content div a fixed height.