所以，我有一个页面，在屏幕上重新定位了多个 div。问题是，当我向其添加 div 时，页面会变得更高。
观察。这是页脚。*我用 php 包含标签提到它以将其添加到页面的其余部分。
（对不起我的英语）
html:
<div id="rodape_content">
<div id="conteudo"><br/>
<center>
<img src="img/sonhe_as_solucao.png" width="300" height="66"/>
</center>
<br/>
<div id="modelo01">
<p><img src="img/modelos/comercio.png" width="50" height="50" align="left"/>
<font color="#fff">COMÉRCIO ELETRÔNICO
<p align="justify">Sites de comércio eletrônico (e-commerce/ loja virtual) é um grande diferencial
competitivo para qualquer empresa, independente do porte da mesma. Com a After Solutions, você
poderá vender suas mercadorias on-line com facilidade e profissionalismo, dispondo das mais
modernas ferramentas do mercado.</p>
</font>
</div>
<div id="modelo02">
<p><img src="img/modelos/dinamicos.png" width="50" height="50" align="left"/>
<font color="#fff">SITE DINÂMICO (PHP)
<p align="justify">Sites dinâmicos, em PHP, são sites "programados" para uma finalidade específica,
seja gerenciar uma área do cliente ou então ter uma interface de manutenção do seu próprio
website. Exemplos de plataformas em PHP: Wordpress (gerenciamento de website), WHMCS
(gerenciamento de clientes e produtos) e PHPbb (gerenciamento de forum).</p>
</font>
</div>
<div id="modelo03">
<p><img src="img/modelos/blogs.png" width="50" height="50" align="left"/>
<font color="#fff">BLOGS
<p align="justify">Os blogs, atualmente, destacam-se pela facilidade de adicionar e expor conteúdos.
Exemplos? Blogs de Humor integrados com as redes sociais, blogs de notícias, pessoais entre
outros. Na After Solutions, você tem a comodidade de ter um blog "desenhado" em sintonia com o
conteúdo postado.</p>
</font>
</div>
<div id="modelo04">
<p><img src="img/modelos/blogs.png" width="50" height="50" align="left"/>
<font color="#fff">PORTFÓLIO
<p align="justify">Um portfólio, é a melhor maneira para um artista expor seu trabalho. A After
Solutions desenvolve portfólios para todo o tipo de artista, seja para músicos, pintores,
fotográfos... Além disso, é possível integrar seu portfólio com um blog, com uma loja virtual ou
ambos! Exponha, anuncie, venda sua obra! </p>
</font>
</div>
</div>
CSS：
body, td, th {
color: #999;
background-image: url(../img/fundo.png);
background-repeat: repeat;
margin: auto;
font-family: "Arial Narrow", cursive;
}
#conteudo {
width: 920px;
margin: auto
}
#modelo01 {
width:220px;
height:250px;
position:relative;
background-image:url(../img/sub_cabecalho_bg.png);
-moz-border-radius: 5px; /* for Firefox */
-webkit-border-radius: 5px; /* for Webkit-Browsers */
border-radius: 5px; /* regular */
border: 2px solid #CCC;
clear:both;
}
#modelo02 {
width:220px;
height:250px;
position:relative;
top: -254px;
left:230px;
background-image:url(../img/sub_cabecalho_bg.png);
-moz-border-radius: 5px; /* for Firefox */
-webkit-border-radius: 5px; /* for Webkit-Browsers */
border-radius: 5px; /* regular */
border: 2px solid #CCC;
clear:both;
}
#modelo03 {
width:220px;
height:250px;
position:relative;
top: -508px;
left:460px;
background-image:url(../img/sub_cabecalho_bg.png);
-moz-border-radius: 5px; /* for Firefox */
-webkit-border-radius: 5px; /* for Webkit-Browsers */
border-radius: 5px; /* regular */
border: 2px solid #CCC;
clear:both;
}
#modelo04 {
width:220px;
height:250px;
position:relative;
top: -762px;
left:690px;
background-image:url(../img/sub_cabecalho_bg.png);
-moz-border-radius: 5px; /* for Firefox */
-webkit-border-radius: 5px; /* for Webkit-Browsers */
border-radius: 5px; /* regular */
border: 2px solid #CCC;
clear:both;
}
#rodape_content {
width: 100%;
height: auto;
background-color: #099;
margin-top: 0px;
border-top: 5px solid #ccc;
}
图片：
