Ajuda com css (height automático)

[Fábio Corrêa Vitorino]

Bom dia amigos!

Estou tendo um problema com meu css, tenho um sistema de exclusão de usuários que lista todos os 

usuários cadastrados no sistema. Eu quero que quando abra o sistema o layout se estenda para
o tamanho da quantidade de usuários.

 

 

Veja que na imagem o o fundo está muito abaixo do ultimo usuário, segue código:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style type="text/css">#titulo {	 height:25px; width:400px; color:#fff; font-family:Tahoma, Geneva, sans-serif; text-align:center; font-size:16px; border:solid 1px #0974AE; background-color:#0974AE;background-image: linear-gradient(to bottom, transparent, rgba(0,0,0,.3));position:absolute;vertical-align:middle;		}#conteudo {	width:400px;	height:100%;	color:#0974AE;	font-family:Tahoma, Geneva, sans-serif;	border:solid 1px #0974AE;	background-color:#E7F5FE;}#tabela {	position:absolute;	left:10px;	top:37px;	text-align:center;			}</style><div id="titulo"><strong>Excluir Usuários cadastrados</strong></div><div id="conteudo"><table id="tabela" bordercolor="#0974AE" width="398" border="1" cellspacing="0" cellpadding="0"  style="border-collapse: collapse;">  <tr>    <td bgcolor="#ABDEFB" style="font-size:14px;" height="100%"><b>Nome</b></td>    <td bgcolor="#ABDEFB" style="font-size:14px;"><b>Usuário</b></td>    <td bgcolor="#ABDEFB" style="font-size:14px;"><b>Excluir</b></td>  </tr>  <tr><?phperror_reporting(E_ALL ^ E_DEPRECATED);$conexao = mysqli_connect("localhost","root","", "news");$result = mysqli_query($conexao, "SELECT login, senha, id FROM news");while($row = mysqli_fetch_object($result)){echo "<tr><td>$row->login</td>".    "<td>$row->senha</td>".    "<td><a href='exclui.php?id=$row->id'><img src='delete.gif' width='30' height='28'></a></td></tr>";	}?></table>

Alguém pode me ajudar? Desde já agradeço!

Abraço.

 

[DiF]

@Fábio Corrêa Vitorino

 

Nesse caso não precisas de height.  apenas retire da regra.

Quando não definido, ele assume a altura do elemento parente.

Isso quer dizer que se retirar o height do elemento "#conteudo"  a tabela se ajustará ao tamanho do número de conteúdo existente.

[Fábio Corrêa Vitorino]

Bom dia @dif

Sempre tu mesmo para me ajudar né?! kkkkk

 

Então,

 

Retirei o height assim como você sugeriu, porém veja o que aconteceu:

 

 

o #conteudo simplesmente não aparece, é como se estivesse com height = 0

 

Você sabe o que pode ser?

[DiF]

@Fábio Corrêa Vitorino

 

Isso pode ser algum conflito de regras.  porquê tu ta usando css inline além do incorporado.

 

Tenta refazer o css, e retirando as regras inline da tabela

 

Uma coisa que precisa saber é que o grau de precedência é maior quando se usa inline..  então se tiver uma regra inline e depois colocar no incorporado,  vai ser sobreposto.

Por isso sempre defina as regras no incorporado e deixe para acrescentar inline quando quer sobrepor alguma regra.

[Fábio Corrêa Vitorino]

@dif

 

Ok, tentarei mais tarde e aviso! 

Valeu!!!

[FabianoS]

Bom dia @dif

Sempre tu mesmo para me ajudar né?! kkkkk

 

Então,

 

Retirei o height assim como você sugeriu, porém veja o que aconteceu:

 

 

o #conteudo simplesmente não aparece, é como se estivesse com height = 0

 

Você sabe o que pode ser?

 

 

posso ta falando besteira nao sei kkk , não manjo muito, mais eu criaria uma div no ultimo elemento antes de terminar o conteudo e daria no css um clear:both;

 

Não sei , só tentando ajudar.

[DiF]

@Fábio Corrêa Vitorino

 

Analisando melhor, o erro mesmo é por que tu definiu posição absoluta na  tabela e no div.

 

Veja o exemplo corrigido: http://jsfiddle.net/ryrsh3kg/

 

O que mudou, foi que troquei os TD de cabeçalho por TH(table head), retirei os css inline da tabela e passei para incorporado... O div do título foi para dentro do div conteudo... enfim.. o problema era simples

[Fábio Corrêa Vitorino]

@dif

 

Vivendo e aprendendo kkkkkk

 

Valeu cara, valeu mesmo!

Abraçooo!!