前段时间我开始学习 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;
}
谁能帮我解决这个问题,并解释这种可能的解决方案的原因?
谢谢!
编辑 - (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;
}
我的背景增加了高度,但是,它超过了页脚,完全失去了布局。
最佳答案
您指的是页脚上方的空白区域吗?如果是这样,那是因为你给了页脚 position:absolute。所以它会粘在相对位置的容器底部。
关于css - 如何拉伸(stretch)背景内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22521131/