[Resolvido] Estender div em 100% de altura

Fidelix · Dezembro 6, 2009

Olá pessoal, estou precisando muito de ajuda pois estou tendo problemas com algo bem simples.

Estou tentando fazer com que uma barra sólida se estenda por 100% de altura na minha página, mas SÓ CONSIGO QUE ELA SE ESTENDA com tamanho fixo. (ex: 800px;)

Veja o HTML em:

http://codepaste.net/4vzond

Veja o CSS em:

http://codepaste.net/i5g2k1

Agradeço qualquer tipo de ajuda.

Já tentei de diversas maneiras, com e sem containers. Obrigado!

Thiago Retondar · Dezembro 6, 2009

Poste os códigos aqui no fórum mesmo, dentro de [ c o d e ].

Sobre sua dúvida, tente o seguinte:

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif coloque um id para a div que engloba tudo. Para exemplo, vou chama-la de div#geral

http://forum.imasters.com.br/public/style_emoticons/default/seta.gif no CSS faça isso:

html, body{
height: 100%;
}
#geral{
min-height: 100%;
}
* html #geral{
height: 100%;
}

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Fidelix · Dezembro 6, 2009

Thiago, sem sucesso. Continua só funcionando especificando diretamente.

Isso ta sendo realmente uma dor de cabeça pra mim. uahsduad

Tenho certeza que deve ser algo bem simples...

Thiago Retondar · Dezembro 7, 2009

Opa, cara, te falei errado. É assim:

html, body{
height: 100%;
}
#geral{
height: 100%;
}
* html #geral{
height: 100%;
}

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Fidelix · Dezembro 7, 2009

Desculpa te encher Thiago. Mas infelizmente também não funcionou.

Dá uma olhadinha no código, talvez tenha algo conflitando no html / css.

Desculpa se é pedir demais...

Agradeço qualquer ajuda... thanx.

Thiago Retondar · Dezembro 7, 2009

Cara, aqui deu de boa...

Testa o código isoladamente e veja como funciona.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Fidelix · Dezembro 7, 2009

Imagem Postada

Se serve de ajuda, aí está a imagem explicando o que quero fazer.

Tem 2 divs cinzas, uma na direita e uma na esquerda, que quero estender até o rodapé.

Mas cara, eu já tentei colocar "height: 100%;" em TODAS as divs que envolvem essas 2. Não vai de jeito nenhum, por isso peço ajuda na análise dos meus arquivos, porque realmente já tentei todo tipo de containers...

Thiago Retondar · Dezembro 7, 2009

Tem um link para eu ver o que está acontecendo?

Teste esses códigos sozinhos para ver como funciona:

*{
	margin: 0;
	padding: 0;
}
html, body{
	height: 100%;
}
div#container{
	height: 100%;	
}
* html #container{
	height: 100%;
}
div#bar{
	width: 50px;
	height: 100%;
	background: red;
}

<!DOCTYPE html>
<html>
<head>
	 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	 <title>iMasters</title>" />
</head>
<body>
<div id="container">
	<div id="bar">Texto</div>
</div>
</body>
</html>

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Fidelix · Dezembro 7, 2009

Infelizmente não tenho um link, pois estou rodando no Joomla dentro do meu próprio PC.

Por isso tentei por o código, pra ajudar o máximo possível.

Sobre o seu código, nem é preciso testar, tenho 100% de certeza que está certo.

O problema é que eu preciso de ajuda identificando o que está atrapalhando as barras ficarem com 100% no meu código.

Qualquer ajuda é válida, se possível dê uma olhada no meu código html/php se não tem alguma irregularidade causando isto.

obrigado!

Thiago Retondar · Dezembro 7, 2009

Já que não tem link, posta aê o código HTML gerado. ;)

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Fidelix · Dezembro 8, 2009

<body id="page_bg"> 
<a name="up" id="up"></a>
<div class="center" align="center">
    <div id="wrapper">
        <div id="search">
                <jdoc:include type="modules" name="user4" />
        </div>
 
        <div id="wrapper_r">
 
            <div id="header">
 
                <div id="header_l">
                    <div id="header_r">
                            <div id="logo">
                                <div <?php echo $id6 ?>><a <?php echo $url6 ?> class="x"></a></div>
                                <div <?php echo $id5 ?>><a <?php echo $url5 ?> class="x"></a></div>
                                <div <?php echo $id4 ?>><a <?php echo $url4 ?> class="x"></a></div>
                                <div <?php echo $id3 ?>><a <?php echo $url3 ?> class="x"></a></div>
                                <div <?php echo $id2 ?>><a <?php echo $url2 ?> class="x"></a></div>
                                <div <?php echo $id1 ?>><a <?php echo $url1 ?> class="x"></a></div>
                            </div>
                            <jdoc:include type="modules" name="topo" />
                    </div>
                </div>                
            </div>
 
            <!--<div id="tabarea">
                <div id="tabarea_l">
                    <div id="tabarea_r">
                        <div id="tabmenu">
                        <table cellpadding="0" cellspacing="0" class="pill">
                            <tr>
                                <td class="pill_l"> </td>
                                <td class="pill_m">
                                <div id="pillmenu">
                                    <jdoc:include type="modules" name="user3" />
                                </div>
                                </td>
                                <td class="pill_r"> </td>
                            </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>-->
            <!--<div id="pathway">
                <jdoc:include type="modules" name="breadcrumb" />
            </div>
            <div class="clr"></div>-->
            <?php //$view = JRequest::getVar('view'); echo $view; echo $murl; ?>    
 
            
            
            <div id="container">
                <div id="caixesquerda"></div>
                <div id="caixadireita"></div>
            </div>
 
            <div id="top-panel"><div id="loginu"><jdoc:include type="modules" name="login" style="rounded" /></div>
<jdoc:include type="modules" name="barraslide" style="rounded" /></div><div id="sub-panel"><a href="#" id="toggle">
<span>Login / Busca</span></a></div>
            <div id="whitebox">
                <div id="whitebox_t">
                    <div id="whitebox_tl">
                        <div id="whitebox_tr"></div>
                    </div>
                </div>
 
                <div id="whitebox_m">
                <div id="area">
                                    <jdoc:include type="message" />
 
                        <div id="leftcolumn">
                        <?php if($this->countModules('left')) : ?>
                            <jdoc:include type="modules" name="left" style="rounded" />
                        <?php endif; ?>
                        </div>
 
                        <?php if($this->countModules('left')) : ?>
                        <div id="maincolumn">
                        <?php else: ?>
                        <div id="maincolumn_full">
                        <?php endif; ?>
                            <?php if($this->countModules('user1 or user2')) : ?>
                                <table class="nopad user1user2">
                                    <tr valign="top">
                                        <?php if($this->countModules('user1')) : ?>
                                            <td>
                                                <jdoc:include type="modules" name="user1" style="xhtml" />
                                            </td>
                                        <?php endif; ?>
                                        <?php if($this->countModules('user1 and user2')) : ?>
                                            <td class="greyline"> </td>
                                        <?php endif; ?>
                                        <?php if($this->countModules('user2')) : ?>
                                            <td>
                                                <jdoc:include type="modules" name="user2" style="xhtml" />
                                            </td>
                                        <?php endif; ?>
                                    </tr>
                                </table>
 
                                <div id="maindivider"></div>
                            <?php endif; ?>
                            
<table class="nopad">
                                <tr valign="top">
                                    <td>
                                        <jdoc:include type="component" />
                                        <jdoc:include type="modules" name="footer" style="xhtml"/>
                                    </td>
                                    <?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
                                        <td class="greyline"> </td>
                                        <td width="170">
                                            <jdoc:include type="modules" name="right" style="xhtml"/>
                                        </td>
                                    <?php endif; ?>
                                </tr>
                            </table>
 
                        </div>
                        <div class="clr"></div>
                    </div>
                    <div class="clr"></div>    
                </div>
 
                <div id="whitebox_b">
                    <div id="whitebox_bl">
                        <div id="whitebox_br"></div>
                    </div>
                </div>
            </div>
 
            <div id="footerspacer"></div>
        </div>
 
        <div id="footer">
            <div id="footer_l">
                <div id="footer_r">
                    <p id="syndicate">
                        <jdoc:include type="modules" name="syndicate" />
                    </p>
                    <p id="power_by">
                          Desenvolvido por <a href="http://www.felipefidelix.com">Felipe Fidelix</a>.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div></div>
<jdoc:include type="modules" name="debug" />

Aqui vai o CSS:

/*****************************/
/*** BAGULHOS DO HTML BASE ***/
/*****************************/
html {
    height: 100%;
    margin-bottom: 1px;
}
form {
    margin: 0;
    padding: 0;
}
body {
    font-family: Helvetica,Arial,sans-serif;
    line-height: 1.3em;
    margin: 0px 0px 0px 0px;
    font-size: 12px;
    color: #333;
    height: 100%;    
}
a:link, a:visited {
    text-decoration: none;
    font-weight: normal;
}
a:hover {
    text-decoration: underline;
    font-weight: normal;
}
input.button { cursor: pointer; }
p { margin-top: 0; margin-bottom: 5px; }
img { border: 0 none; }
/*****************************************/
/*** ELEMENTOS ESPECÍFICOS DO TEMPLATE ***/
/*****************************************/
#page_bg {
    padding: 10px 0;
    margin-bottom: 1px;
}
div.center {
  text-align: center;
  height; 100%;
}
div#wrapper {
    margin-left: auto;
    margin-right: auto;
    height: 100%;
}
body.width_medium div#wrapper {
    width: 950px;
    height:100%
}
body.width_small div#wrapper {
    width: 773px;
    height:100%
}
body.width_fmax div#wrapper {
    min-width: 750px;
    max-width: 1054px;
height:100%
}
div#header_r {
    height: 217px;
    padding-left: 370px;
    padding-right: 30px;
    padding-top: 25px;
    text-align: left;
    position: relative;
}
.x {
    display:block;
    height: 100%;
    width: 100%;
}
div#menuh1 {    background: url(../images/mn/home.png) 0 0 no-repeat;
    position: relative;    float: right; top: 60px;
    width: 89px; height: 108px;
    margin-right: 3px;
}
div#menuh2 {
    background: url(../images/mn/empresas.png) 0 0 no-repeat;
    position: relative;    float: right; top: 60px;
    width: 74px; height: 108px;
    margin-right: 3px;
}
div#menuh3 {
    background: url(../images/mn/servicos.png) 0 0 no-repeat;
    position: relative;    float: right; top: 60px;
    width: 74px; height: 108px;
    margin-right: 3px;
}
div#menuh4 {
    background: url(../images/mn/usados.png) 0 0 no-repeat;
    position: relative;    float: right; top: 60px;
    width: 74px; height: 108px;
    margin-right: 3px;
}
div#menuh5 {
    background: url(../images/mn/campanha.png) 0 0 no-repeat;
    position: relative;    float: right; top: 60px;
    width: 74px; height: 108px;
    margin-right: 3px;
}
div#menuh6 {
    background: url(../images/mn/contato.png) 0 0 no-repeat;
    position: relative;    float: right; top: 60px;
    width: 91px; height: 108px;
}
div#menuh1-y {
    background: url(../images/mn/home-y.png) 0 0 no-repeat;
    position: relative;    float: right; top: 60px;
    width: 92px; height: 108px;
}
div#menuh2-y {
    background: url(../images/mn/empresa-y.png) 0 0 no-repeat;
    position: relative;    float: right; top: 60px;
    width: 82px; height: 108px;
    margin-left: -3px;
}
div#menuh3-y {
    background: url(../images/mn/servicos-y.png) 0 0 no-repeat;
    position: relative;    float: right; top: 60px;
    width: 82px; height: 108px;
    margin-left: -3px;
}
div#menuh4-y {
    background: url(../images/mn/usados-y.png) 0 0 no-repeat;
    position: relative;    float: right; top: 60px;
    width: 82px; height: 108px;
    margin-left: -3px;
}
div#menuh5-y {
    background: url(../images/mn/campanha-y.png) 0 0 no-repeat;
    position: relative;    float: right; top: 60px;
    width: 82px; height: 108px;
    margin-left: -3px;
}
div#menuh6-y {
    background: url(../images/mn/contato-y.png) 0 0 no-repeat;
    position: relative;    float: right; top: 60px;
    width: 96px; height: 108px;
    margin-left: -3px;
}
div#logo {
    position: absolute;
    left: 0;
    top: 0;
    width: 1024px;
    height: 238px;
    background: url(../images/fdx-header.jpg) 0 0 no-repeat;
    margin-left: 15px;
    margin-top: 16px;
}
 
 
 
 
 
 
 
 
 
#whitebox {
    background: #fff;
    width: auto;
    margin: 0 auto 0 auto;
    background: #fff;
    width: 800px;
    height: 100%;;
}
#whitebosx {

}
#caixesquerda {
background-color: #BFC0C1;
width: 91px;    
display: block;
min-height:100%;
height:auto;
float: left;
margin-left: 15px;
margin-top: -9px;
background-position: right;
background-image:url('../images/sombra-left.gif');
background-repeat: repeat-y;
 
}
#caixadireita {
background-color: #BFC0C1;
width: 82px;
display: block;
float: right;
margin-right: 15px;
margin-top: -9px;
background-position: left;
background-image:url('../images/sombra-right.gif');
background-repeat: repeat-y;
}
div#newsflash {
    width: auto;
    margin-left: 350px;
    margin-right: 30px;
    border: 1px solid #00f;
}
 
div#tabarea {
    background: #f7f7f7 url(../images/mw_header_b.png) 0 0 repeat-x;
    margin: 0 11px;
 
}
 
div#tabarea_l {
    background: url(../images/mw_header_l_b.png) 0 0 no-repeat;
    padding-left: 32px;
}
 
div#tabarea_r {
    height: 42px;
    background: url(../images/mw_header_r_b.png) 100% 0 no-repeat;
    padding-right: 1px;
}
 
div#footer_r {
    padding-top: 10px;
    height: 47px;
    overflow: hidden;
}
 
div#footer_r div {
    text-align: center;
    font-size: .90em;
    color: #aaa;
}
 
div#footer_r a:link, div#footer_r a:visited  {
    color: #999;
}
 
div#footerspacer {
    height: 10px;
}
 
#pathway {
    padding: 0px 10px 8px;
    width: auto;
    margin-top: -2px;
    margin-right: 250px;
    text-align: left;
}
 
#search {
    width:320px;
    margin-top: -20px;
    margin-right: 30px;
    height: 40px;
    overflow: hidden;
    text-align:right;
}
 
form#searchForm input {
    vertical-align: middle;
}
 
form#searchForm table {
    border-collapse: collapse;
}
 
form#searchForm td {
    padding:0;
}
 
#mod_search_searchword {
    padding-left: 3px;
}
 
#area {
    padding: 0;
}
#whitebox div {
    text-align: left;
    
}
#whitebox_t {
    background: #fff url(../images/mw_content_t.png) 0 0 repeat-x;
}
#whitebox_tl {
    background: url(../images/mw_content_t_l.png) 0 0 no-repeat;
}
 
#whitebox_tr {
    height: 10px;
    overflow: hidden;
    background: url(../images/mw_content_t_r.png) 100% 0 no-repeat;
}
 
#whitebox_m {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    width: auto;
    padding: 1px 8px;    
}
 
#whitebox_b {
    margin-top: -13px;
    background: url(../images/mw_content_b.png) 0 100% repeat-x;
}
 
#whitebox_bl {
    background: url(../images/mw_content_b_l.png) 0 100% no-repeat;
}
 
#whitebox_br {
    height: 13px;
    background: url(../images/mw_content_b_r.png) 100% 100% no-repeat;
    
    
}
 
/* horizontal pill menu */
table.pill {
  margin-left: auto;
  margin-right: auto;
  padding: 0;
}
 
td.pill_l {
/*  background: url(../images/mw_menu_cap_l.png) no-repeat;*/
  width:  20px;
  height: 32px;
 
}
 
td.pill_m {
  background: url(../images/mw_menu_normal_bg.png) repeat-x;
  padding: 0;
  margin: 0;
  width: auto;
}
 
td.pill_r {
  /*background: url(../images/mw_menu_cap_r.png) no-repeat;*/
  width:  19px;
  height: 32px;
}
 
#pillmenu {
  white-space: nowrap;
  height: 32px;
  float: left;
}
 
#pillmenu ul {
  margin: 0;
  padding: 0;
  list-style:none;
}
 
#pillmenu li {
    float: left;
    background: url(../images/mw_menu_separator.png) top right no-repeat;
    margin: 0;
    padding: 0;
}
 
#pillmenu a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    float:left;
    display:block;
    height: 24px;
    line-height: 24px;
    padding: 0 20px;
    color: #000;
    text-decoration: none;
}
 
#pillmenu a#active_menu-nav {
    margin-top:2px;
    height: 21px;
    line-height: 21px;
    background-position: 0 0;
}
 
 
#leftcolumn {
    padding: 0;
    margin: 0;
    width: 20%;
    float:left;
}
 
#maincolumn,
#maincolumn_full {
    margin-left: 20%;
    padding-left: 15px;
    width: 75%;
}
 
#maincolumn_full {
    margin-left: 0;
    padding: 0;    
    width: 100%;
}
 
table.nopad {
    width: 100%;
    border-collapse: collapse;
    padding: 0;
    margin: 0;
    margin-bottom: 15px;
}
 
table.nopad td.middle_pad {
    width: 20px;
}
/************************************/
/*****************************************/
/*** Joomla! specific content elements ***/
/*****************************************/
 
div.offline {
    background: #fffebb;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 1.2em;
    padding: 5px;
}
 
span.pathway {
  display: block;
  margin: 0 20px;
  height: 16px;
  line-height: 16px;
  overflow: hidden;
}
 
/* headers */
div.componentheading {
  padding-left: 0px;
}
 
h1 {
    padding: 0;
    font-family:Helvetica ,Arial,sans-serif;
    font-size: 1.3em;
    font-weight: bold;
    vertical-align: bottom;
    color: #666;
    text-align: left;
    width: 100%;
}
 
h2, .contentheading {
    padding: 0;
    font-family: Arial, Helvetica,sans-serif;
    font-size: 1.4em;
    font-weight: normal;
    vertical-align: bottom;
    color: #333;
    text-align: left;
    width: 100%;
}
 
table.contentpaneopen h3 {
    margin-top: 25px;
}
 
h4 {
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
}
 
h3, .componentheading, table.moduletable th, legend {
  margin: 0;
  font-weight: bold;
  font-family: Helvetica,Arial,sans-serif;
  font-size: 1.5em;
  padding-left: 0px;
    margin-bottom: 10px;
    text-align: left;
}
 
/* small text */
.small {
    font-size: .90em;
    color: #999;
    font-weight: normal;
    text-align: left;
}
 
.modifydate {
  height: 20px;
  vertical-align: bottom;
    font-size: .90em;
    color: #999;
    font-weight: normal;
    text-align: left;
}
 
.createdate {
    height: 20px;
    vertical-align: top;
    font-size: .90em;
    color: #999;
    font-weight: normal;
    vertical-align: top;
    padding-bottom: 5px;
    padding-top: 0px;
 
}
 
a.readon {
    margin-top: 10px;
    display: block;
    float: left;
    background: url(../images/mw_readon.png) top right no-repeat;
    padding-right: 20px;
    line-height: 14px;
    height: 16px;
}
 
/* form validation */
.invalid { border-color: #ff0000; }
label.invalid { color: #ff0000; }

 
/** overlib **/
 
.ol-foreground {
    background-color: #f6f6f6;
}
 
.ol-background {
    background-color: #666;
}
 
.ol-textfont {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
}
 
.ol-captionfont {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #f6f6f6;
    font-weight: bold;
}
.ol-captionfont a {
    color: #0B55C4;
    text-decoration: none;
    font-size: 12px;
}
 
.ol-closefont {}

/* menu links */
a.mainlevel:link, a.mainlevel:visited {
    padding-left: 5px;
}
 
a.mainlevel:hover {

}
 
/* spacers */
span.article_separator {
    display: block;
    height: 20px;
}
 
.article_column {
    padding-right: 5px;
}
 
.column_separator {
    border-left: 1px dashed #e0e0e0;
    padding-left: 10px;
}
 
td.buttonheading {

}
 
td.buttonheading img {
    border:none;
}
 
.clr {
    clear: both;
}
 
td.greyline {
  width: 20px;
  background: url(../images/mw_line_grey.png) 50% 0 repeat-y;
}
 
div#maindivider {
  border-top: 1px solid #ddd;
  margin-bottom: 10px;
  overflow: hidden;
  height: 1px;
}
 
table.blog span.article_separator {
    display: block;
    height: 20px;
}
 
/* edit button */
.contentpaneopen_edit{
    float: left;
}
 
/* table of contents */
table.contenttoc {
  margin: 5px;
  border: 1px solid #ccc;
  padding: 5px;
  float: right;
}
 
table.contenttoc td {
  padding: 0 5px;
}
 
 
/* content tables */
td.sectiontableheader {
  background: #efefef;
  color: #333;
  font-weight: bold;
  padding: 4px;
  border-right: 1px solid #fff;
}
 
tr.sectiontableentry0 td,
tr.sectiontableentry1 td,
tr.sectiontableentry2 td {
  padding: 4px;
}
 
td.sectiontableentry0,
td.sectiontableentry1,
td.sectiontableentry2 {
  padding: 3px;
}
 
 
/* content styles */
table.contentpaneopen, table.contentpane {
    margin: 0;
    padding: 0;
    width: 100%;
}
 
table.contentpaneopen li {
    margin-bottom: 5px;
}
 
table.contentpaneopen fieldset {
    border: 0;
    border-top: 1px solid #ddd;
}
 
table.contentpaneopen h3 {
    margin-top: 25px;
}
 
table.contentpaneopen h4 {
    font-family: Arial, Helvetica, sans-serif;
    color: #333;
}
 
.highlight {
    background-color: #fffebb;
}
 
/* module control elements */
table.user1user2 div.moduletable {
    margin-bottom: 0px;
}
 
div.moduletable, div.module {
  margin-bottom: 25px;
}
 
div.module_menu h3 {
    font-family: Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #eee;
    margin: -23px -4px 5px -5px;
    padding-left: 10px;
    padding-bottom: 2px;
}
 
div.module_menu {
    margin: 0;
    padding: 0;
    margin-bottom: 15px;
}
 
div.module_menu div div div {
    padding: 10px;
    padding-top: 30px;
    padding-bottom: 15px;
    width: auto;
}
 
div.module_menu div div div div {
    background: none;
    padding: 0;
}
 
div.module_menu ul {
    margin: 10px 0;
    padding-left: 20px;
}
 
div.module_menu ul li a:link, div.module_menu ul li a:visited {
    font-weight: bold;
}
 
#leftcolumn div.module {
    padding: 0 10px;
}
 
#leftcolumn div.module table {
    width: auto;
}
 
/* forms */
table.adminform textarea {
  width: 540px;
  height: 400px;
  font-size: 1em;
  color: #000099;
}
 
div.search input {
    width: 145px;
    border: 1px solid #ccc;
    margin: 15px 0 10px 0;
}
 
form#form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#form-login ul { padding-left: 20px; }

form#com-form-login fieldset { border: 0 none; margin: 0em; padding: 0.2em;}
form#com-form-login ul { padding-left: 20px; }

/* thumbnails */
div.mosimage         {  margin: 5px; }
div.mosimage_caption {  font-size: .90em; color: #666; }

div.caption       { padding: 0 10px 0 10px; }
div.caption img   { border: 1px solid #CCC; }
div.caption p     { font-size: .90em; color: #666; text-align: center; }

/* Parameter Table */
table.paramlist {
    margin-top: 5px;
}
 
table.paramlist td.paramlist_key {
    width: 128px;
    text-align: left;
    height: 30px;
}
 
table.paramlist td.paramlist_value {
}
 
div.message {
    font-family : "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size : 14px;
    color : #c30;
    text-align: center;
    width: auto;
    background-color: #f9f9f9;
    border: solid 1px #d5d5d5;
    margin: 3px 0px 10px;
    padding: 3px 20px;
}
 
/* Banners module */
 
/* Default skyscraper style */
.bannergroup {
}
 
.banneritem img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
 
/* Text advert style */
 
.banneritem_text {
    padding: 4px;
    font-size: 11px;
}
 
.bannerfooter_text {
    padding: 4px;
    font-size: 11px;
    background-color: #F7F7F7;
    text-align: right;
}
 
/* System Messages */
/* see system general.css */
 
.pagination span { padding: 2px; }
.pagination a    { padding: 2px; }

/* Polls */
.pollstableborder td {
    text-align: left;
}
 
/* WebLinks */
span.description {
    display:block;
    padding-left: 30px;
}
 
/* Frontend Editing*/
fieldset {
    border: 1px solid #ccc;
    margin-top: 15px;
    padding: 15px;
}
 
legend {
    margin: 0;
    padding: 0 10px;
}
 
td.key {
    border-bottom:1px solid #eee;
    color: #666;
}
 
/* Tooltips */
 
.tool-tip {
    float: left;
    background: #ffc;
    border: 1px solid #D4D5AA;
    padding: 5px;
    max-width: 200px;
}
 
.tool-title {
    padding: 0;
    margin: 0;
    font-size: 100%;
    font-weight: bold;
    margin-top: -15px;
    padding-top: 15px;
    padding-bottom: 5px;
    background: url(../../system/images/selector-arrow.png) no-repeat;
}
 
.tool-text {
    font-size: 100%;
    margin: 0;
}
 
/* System Standard Messages */
#system-message { margin-bottom: 20px; }

#system-message dd.message ul { background: #C3D2E5 url(../../system/images/notice-info.png)
4px center no-repeat;border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B;
margin:0px; padding-left: 40px; text-indent:0px;}

/* System Error Messages */
#system-message dd.error ul { color: #c00; background: #E6C0C0 url(../../system/images/notice-alert.png)
4px center no-repeat; border-top: 3px solid #DE7A7B; border-bottom: 3px solid #DE7A7B; margin:0px;
padding-left: 40px; text-indent:0px;}

/* System Notice Messages */
#system-message dd.notice ul { color: #c00; background: #EFE7B8 url(../../system/images/notice-note.png)
4px center no-repeat; border-top: 3px solid #F0DC7E; border-bottom: 3px solid #F0DC7E; margin:0px;
padding-left: 40px; text-indent:0px;}

#syndicate{
    float:left;
    padding-left: 25px;
}
 
#power_by{
    float:right;
    padding-right: 25px;
}
 
/* Component Specific Fixes */
 
#component-contact table td {
    padding: 2px 0;
}
 
 
 
 
 
 
 
 
 
#top-panel{
    background:#e8f3c6;
    border-bottom:3px solid #a6c34e;
    padding:14px 20px;
    text-align:right;
}
#sub-panel{
    text-align:center;
}
#sub-panel a{
    width:150px;
    float:right;
    color:#FFFFFF;
    text-decoration:none;
    margin-right:30px;
    font-weight:bold;
    background:url(../img/sub-left.png) bottom left no-repeat #a6c34e;
}
#sub-panel a span{
    padding:6px;
    background:url(../img/sub-right.png) right bottom no-repeat;
    display:block;
 
}
strong{color:#000000;}
.face{border:solid 2px #a6c34e; margin-left:10px; float:right;}

 
#loginu div{

}    
 
#container{
position:relative;
height: 100%;
width: 50px;
float:left;
}

Thiago Retondar · Dezembro 8, 2009

Não, man, não... O HTML gerado.

Faz o seguinte: da um Ctrl + U no browser e nos mostre o HTML gerado.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Fidelix · Dezembro 9, 2009

é pra já!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br" >
<head>
  <base href="http://localhost/j/" />
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="joomla, Joomla" />
  <meta name="description" content="Joomla! - O sistema dinâmico de portais e gerenciador de conteúdo" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Elevasul</title>
  <link href="/j/index.php?format=feed&type=rss" rel="alternate" type="application/rss+xml" title="RSS 2.0" />
  <link href="/j/index.php?format=feed&type=atom" rel="alternate" type="application/atom+xml" title="Atom 1.0" />
  <link href="/j/templates/fdx_elevasul/favicon.ico" rel="shortcut icon" type="image/x-icon" />
  <link rel="stylesheet" href="/j/media/system/css/modal.css" type="text/css" />
  <link rel="stylesheet" href="http://localhost/j/components/com_k2/css/style.css" type="text/css" />
  <link rel="stylesheet" href="/j/modules/mod_rokajaxsearch/css/rokajaxsearch.css" type="text/css" />
  <link rel="stylesheet" href="/j/modules/mod_rokajaxsearch/themes/light/rokajaxsearch-theme.css" type="text/css" />
  <link rel="stylesheet" href="http://localhost/j/modules/mod_yoo_login/mod_yoo_login.css.php" type="text/css" />
  <script type="text/javascript" src="/j/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/j/media/system/js/modal.js"></script>
  <script type="text/javascript" src="http://localhost/j/components/com_k2/js/k2.js"></script>
  <script type="text/javascript" src="/j/media/system/js/caption.js"></script>
  <script type="text/javascript" src="/j/modules/mod_rokajaxsearch/js/rokajaxsearch.js"></script>
  <script type="text/javascript">

		window.addEvent('domready', function() {

			SqueezeBox.initialize({});

			$$('a.modal').each(function(el) {
				el.addEvent('click', function(e) {
					new Event(e).stop();
					SqueezeBox.fromElement(el);
				});
			});
		});
var K2RatingURL = 'http://localhost/j/';
window.addEvent((window.webkit) ? 'load' : 'domready', function() {
				window.rokajaxsearch = new RokAjaxSearch({
					'results': ' Resultados',
					'close': '',
					'websearch': 0,
					'blogsearch': 0,
					'imagesearch': 0,
					'videosearch': 0,
					'imagesize': 'MEDIUM',
					'safesearch': 'MODERATE',
					'search': ' Buscar...',
					'readmore': ' Ler mais...',
					'noresults': ' Nenhum resultado',
					'advsearch': ' Busca Avançada',
					'page': ' Página',
					'page_of': ' de',
					'searchlink': 'http://localhost/j/index.php?option=com_search&view=search&tmpl=component',
					'advsearchlink': 'http://localhost/j/index.php?option=com_search&view=search',
					'uribase': 'http://localhost/j/',
					'limit': '10',
					'perpage': '3',
					'ordering': 'popular',
					'phrase': 'exact',
					'hidedivs': '',
					'includelink': 1,
					'viewall': ' Ver todos os resultados',
					'estimated': ' estimado',
					'showestimated': 1,
					'showpagination': 1,
					'showcategory': 1,
					'showreadmore': 1,
					'showdescription': 1
				});
			});
  </script>
  <!--[if IE 7]>
				<link href="http://localhost/j/components/com_k2/css/ie7.css" rel="stylesheet" type="text/css" />
				<![endif]-->
				<!--[if lte IE 6]>
				<link href="http://localhost/j/components/com_k2/css/ie6.css" rel="stylesheet" type="text/css" />
				<![endif]-->

<link rel="stylesheet" href="/j/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="/j/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="/j/templates/fdx_elevasul/css/template.css" type="text/css" />
<link rel="stylesheet" href="/j/templates/fdx_elevasul/css/orange.css" type="text/css" />
<link rel="stylesheet" href="/j/templates/fdx_elevasul/css/white_bg.css" type="text/css" />
<!--[if lte IE 6]>
<link href="/j/templates/fdx_elevasul/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->


<script type="text/javascript" src="/j/templates/fdx_elevasul/mootools.svn.js"></script>
<script type="text/javascript">
window.addEvent('domready', function(){
	var mySlide = new Fx.Slide('top-panel');
	
	$('toggle').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});
	mySlide.hide();
});</script>
</head>


<body id="page_bg" class="color_orange bg_white width_fmax">

<a name="up" id="up"></a>
<div id="geral"><div class="center" align="center">
	<div id="wrapper">
		<div id="search">
				
		</div>
			
		<div id="wrapper_r">

			<div id="header">

				<div id="header_l">
					<div id="header_r">
							<div id="logo">
								<div id="menuh6"><a href="/j/index.php/contato" class="x"></a></div>
								<div id="menuh5"><a href="/j/index.php/campanha" class="x"></a></div>
								<div id="menuh4"><a href="/j/index.php/usados" class="x"></a></div>
								<div id="menuh3"><a href="/j/index.php/produtos" class="x"></a></div>
								<div id="menuh2"><a href="/j/index.php/empresa" class="x"></a></div>
								<div id="menuh1-y"><a  class="x"></a></div>
							</div>
							
					</div>
				</div>				
			</div>

			<!--<div id="tabarea">
				<div id="tabarea_l">
					<div id="tabarea_r">
						<div id="tabmenu">
						<table cellpadding="0" cellspacing="0" class="pill">
							<tr>
								<td class="pill_l"> </td>
								<td class="pill_m">
								<div id="pillmenu">
									
								</div>
								</td>
								<td class="pill_r"> </td>
							</tr>
							</table>
						</div>
					</div>
				</div>
			</div>-->
			<!--<div id="pathway">
				
			</div></div>
			<div class="clr"></div>-->
				

			
			

				<div id="caixesquerda" ></div>
				<div id="caixadireita" ></div>
			
			<div id="top-panel"><div id="loginu">		<div class="module">
			<div>
				<div>
					<div>
											
<span class="quick" style="display: block;">
	<span class="yoo-login">
	
				
				
		<span class="login">
		
			<form action="index.php" method="post" name="login">
						
			<span class="username">
			
				<input type="text" name="username" size="18" alt="Nome de Usuário" value="Nome de Usuário" onblur="if(this.value=='') this.value='Nome de Usuário';" onfocus="if(this.value=='Nome de Usuário') this.value='';" />
				
			</span>
			
			<span class="password">
			
				<input type="password" name="passwd" size="10" alt="Senha" value="Senha" onblur="if(this.value=='') this.value='Senha';" onfocus="if(this.value=='Senha') this.value='';" />
				
			</span>

			<input type="hidden" name="remember" value="yes" />
			
			<span class="login-button-icon">
				<button value="" name="Submit" type="submit" title="Login"></button>
			</span>
			
						<span class="lostpassword">
				<a href="/j/index.php/component/user/reset" title="Esqueceu sua senha?"></a>
			</span>
						
						<span class="lostusername">
				<a href="/j/index.php/component/user/remind" title="Esqueceu seu usuário?"></a>
			</span>
						
						<span class="registration">
				<a href="/j/index.php/component/user/?task=register" title="Crie uma conta"></a>
			</span>
						
						
			<input type="hidden" name="option" value="com_user" />
			<input type="hidden" name="task" value="login" />
			<input type="hidden" name="return" value="aHR0cDovL2xvY2FsaG9zdC9qLw==" />
			<input type="hidden" name="7b9b8a95f478338b5e58d91c8d5bc949" value="1" />
		</form>
		</span>
		
				
	</span>
</span>					</div>
				</div>
			</div>
		</div>
	</div>		<div class="module">
			<div>
				<div>
					<div>
											<form name="rokajaxsearch" id="rokajaxsearch" class="light" action="http://localhost/j/" method="get">
<div class="rokajaxsearch">
	<input id="roksearch_search_str" name="searchword" type="text" class="inputbox" value=" Buscar..." />
	<input type="hidden" name="searchphrase" value="exact"/>
	<input type="hidden" name="limit" value="" />
	<input type="hidden" name="ordering" value="popular" />
	<input type="hidden" name="view" value="search" />
	<input type="hidden" name="Itemid" value="99999999" />
	<input type="hidden" name="option" value="com_search" />

	
	<div id="roksearch_results"></div>
</div>
<div id="rokajaxsearch_tmp" style="visibility:hidden;display:none;"></div>
</form>					</div>
				</div>
			</div>
		</div>
	</div><div id="sub-panel"><a href="#" id="toggle"><span>Login / Busca</span></a></div>
			<div id="whitebox">
				<div id="whitebox_t">
					<div id="whitebox_tl">
						<div id="whitebox_tr"></div>
					</div>
				</div>

				<div id="whitebox_m">
				<div id="area">
									

						<div id="leftcolumn">
												</div>

												<div id="maincolumn_full">
																				
<table class="nopad">
								<tr valign="top">
									<td>
										<div class="componentheading">
	Elevasul</div>
<table class="blog" cellpadding="0" cellspacing="0">
<tr>
	<td valign="top">
					<div>
		
<table class="contentpaneopen">
<tr>
		<td class="contentheading" width="100%">
					teste			</td>
	
		<td align="right" width="100%" class="buttonheading">
	<a href="/j/index.php?view=article&id=1:teste&format=pdf" title="PDF" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/j/images/M_images/pdf_button.png" alt="PDF"  /></a>	</td>
	
		<td align="right" width="100%" class="buttonheading">
	<a href="/j/index.php?view=article&id=1:teste&tmpl=component&print=1&layout=default&page=" title="Imprimir" onclick="window.open(this.href,'win2','status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=640,height=480,directories=no,location=no'); return false;" rel="nofollow"><img src="/j/images/M_images/printButton.png" alt="Imprimir"  /></a>	</td>
	
		<td align="right" width="100%" class="buttonheading">
	<a href="/j/index.php/component/mailto/?tmpl=component&link=aHR0cDovL2xvY2FsaG9zdC9qL2luZGV4LnBocC9jb21wb25lbnQvY29udGVudC9hcnRpY2xlLzEtdGVzdGU%3D" title="E-mail" onclick="window.open(this.href,'win2','width=400,height=350,menubar=yes,resizable=yes'); return false;"><img src="/j/images/M_images/emailButton.png" alt="E-mail"  /></a>	</td>
		</tr>
</table>
<table class="contentpaneopen">




<tr>
<td valign="top" colspan="2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis diam arcu, non suscipit odio. Mauris hendrerit eros sed mauris dapibus interdum. Vestibulum sed lacus sed lectus ultricies commodo. Pellentesque id dolor ante, at consectetur sem. Etiam eros turpis, hendrerit quis suscipit eu, sodales vel est. Suspendisse vehicula, quam convallis tincidunt tristique, mi libero tempor turpis, id fringilla erat massa a est. Cras varius, justo at pharetra laoreet, enim dui dictum dui, non iaculis justo ipsum id justo. Morbi id turpis ut neque gravida pellentesque. Morbi tristique sem eget est vehicula pulvinar eget et massa. Pellentesque sollicitudin tincidunt velit, at faucibus ante pharetra et. Aliquam ac lectus at magna viverra malesuada. Donec rutrum elit eu tortor feugiat mollis. Praesent ac ligula est. <br /><br />Suspendisse sit amet massa vel eros sodales placerat at nec felis. Sed vitae justo libero, eu semper diam. Sed purus leo, condimentum quis congue eu, viverra quis justo. Praesent vitae magna non nunc dignissim suscipit. Nulla egestas faucibus scelerisque. Fusce nulla ligula, tincidunt sit amet euismod nec, tristique dignissim massa. Curabitur id tellus a est condimentum varius quis nec ante. Vivamus eget pharetra mauris. Vivamus semper condimentum leo, vel hendrerit ante eleifend sed. Vivamus porttitor massa et lorem viverra sed semper odio ultricies. Fusce fermentum viverra velit congue congue. Vestibulum fermentum pulvinar nisi, a fringilla velit mattis sed. Nam sit amet erat in elit imperdiet semper. Vestibulum fermentum risus neque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent id risus diam. Nullam lobortis viverra ipsum, non faucibus magna volutpat non. Duis feugiat varius velit, in facilisis augue ultrices dictum. Phasellus dignissim quam sit amet arcu molestie commodo. Ut convallis odio ac arcu laoreet rhon</p></td>
</tr>



</table>
<span class="article_separator"> </span>
		</div>
		</td>
</tr>


</table>

										
									</td>
																	</tr>
							</table>

						</div>
						<div class="clr"></div>
					</div>
					<div class="clr"></div>	
				</div>

				<div id="whitebox_b">
					<div id="whitebox_bl">
						<div id="whitebox_br"></div>
					</div>
				</div>
			</div>

			<div id="footerspacer"></div>
		</div>

		<div id="footer">
			<div id="footer_l">
				<div id="footer_r">
					<p id="syndicate">
						
					</p>
					<p id="power_by">
	 				 	Desenvolvido por <a href="http://www.felipefidelix.com">Felipe Fidelix</a>.
					</p>
				</div>
			</div>
		</div>
	</div>
</div></div></div>


</body>
</html>

Obrigado por responder, fico no aguardo!

Thiago Retondar · Dezembro 9, 2009

Mesmo assim é impossível ajudar... Precisaria do link mesmo. =/

Veja que está errado:

div.center {
  text-align: center;
  height; 100%;
}

E valide o HTML, parece que tem umas tags não fechadas.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Fidelix · Dezembro 9, 2009

Putz, estou muito agradecido. Resolvi meu problema!

THAAANX!

Thiago Retondar · Dezembro 9, 2009

Uma dica é sempre validar o HTML e CSS. Algumas vezes sempre acontecem errinhos como esse.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Arquivado

[Resolvido] Estender div em 100% de altura

Recommended Posts

Fidelix 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fidelix 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fidelix 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fidelix 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fidelix 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fidelix 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fidelix 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fidelix 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Oriantação - Java Netbeans Componentes Template AdminLTE

Orientação - Codificação Caracteres Especiais em Java

Não consigo carregar imagem do captcha no meu formulário

Fóruns

Tempo Real

Informação importante