← HTML + CSS

[HTML + CSS] Auto Height

Lida 4679 vezes

Offline
H

Henrique Mouta 
Equipa
Mensagens 1189 Gostos 3
Troféus totais: 31
Trófeus: (Ver todos)
Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

Boas.
Tenho aqui um problema.

Tenho aqui o seguinte codigo

Código: [Seleccione]
<div id="cdbody">
<div id="cbesq"></div>
<div id="cbbody">
Teste
</div>
<div id="cbdto"></div>
</div>

com o o seguinte CSS associado

Código: [Seleccione]
#cdbody {
width: 504px;
height:100px;
}
#cbesq {
width: 14px;
height: 100%;
float: left;
background: url(content/sbesq.png) no-repeat;
}

#cbdto {
width: 18px;
height: 100%;
float: right;
background: url(content/sbdto.png) no-repeat;
}

#cbbody {
width: 472px;
height: 100%;
float: left;
background: url(content/background.png) repeat-x;
}

E queria que o tamanho de todas as div's dependemsem do tamanho que a div cbbody ocupa.
Alguem me pode ajudar?
Offline
F

Flieger 
Membro
Mensagens 198 Gostos 0
Troféus totais: 29
Trófeus: (Ver todos)
Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

Olá vaurdan experimenta colocar isto na div principal, para ver se resolve:

Código: [Seleccione]
min-height:100%;
height:auto;
Offline
H

Henrique Mouta 
Equipa
Mensagens 1189 Gostos 3
Troféus totais: 31
Trófeus: (Ver todos)
Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

ja tinha tentado e nao consigo.
Offline
H

Henrique Mouta 
Equipa
Mensagens 1189 Gostos 3
Troféus totais: 31
Trófeus: (Ver todos)
Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

Então?
Offline

webflex 
Membro
Mensagens 18 Gostos 0
Troféus totais: 22
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post Karma

Olá,

Bom fiz do seguinte modo e deu-me:

HTML
Código: [Seleccione]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Teste</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>


<div id="teste">

<div id="teste1">teste</div>
   
    <div id="teste2">Test</div>
   
    <div id="teste3">teste</div>

</div>

 
</body>
</html>
CSS
Código: [Seleccione]
* {
margin: 0px;
padding: 0px;
list-style: none;
}

#teste {
width: 500px;
height: 100px;
}

#teste1 {
width: 100px;
height: 100%;
background-color: #39C;
float: left;
}

#teste2 {
width: 100px;
height: 100%;
background-color: #45A;
float: left;
}

#teste3 {
width: 300px;
height: 100%;
background-color: #FDA;
float: left;
}
Testei no Firefox (versão mais recente) e Safari.

Cumprimentos,
webflex
Offline
H

Henrique Mouta 
Equipa
Mensagens 1189 Gostos 3
Troféus totais: 31
Trófeus: (Ver todos)
Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

mas puzeste um valor no #teste de    height: 100px;
Eu quero que o height seja automático consuante o texto
Offline

webflex 
Membro
Mensagens 18 Gostos 0
Troféus totais: 22
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post Karma

Acho que desse modo não é possível, a div pai tem que ter uma altura estipulada.

Cumprimentos,
webflex
Offline
H

Henrique Mouta 
Equipa
Mensagens 1189 Gostos 3
Troféus totais: 31
Trófeus: (Ver todos)
Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

pois, mas entao como fazem por exemplo num blog que uma div tem o seu tamanho relativo ao texto?
Offline

webflex 
Membro
Mensagens 18 Gostos 0
Troféus totais: 22
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post Karma

Olá,

É possível mostrar um exemplo para perceber a ideia?

Cumprimentos,
webflex
Offline
H

Henrique Mouta 
Equipa
Mensagens 1189 Gostos 3
Troféus totais: 31
Trófeus: (Ver todos)
Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

sim, amanha colocarei um exemplo :)
Offline

webflex 
Membro
Mensagens 18 Gostos 0
Troféus totais: 22
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post Karma

Olá,

Ok, assim que puder te ajudarei ;).

Cumprimentos,
webflex
Offline

Warrior 
Membro
Mensagens 203 Gostos 0
Troféus totais: 27
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Se estipulares um limite de largura, consoante o texto ela expande-se para baixo..

Se tiveres:
Código: [Seleccione]
<div style="width:200px;">TEXTO</div>
Consoante fores escrevendo texto, ele vai aumentando a altura da div (expande-se consoante o conteúdo)
Offline
H

Henrique Mouta 
Equipa
Mensagens 1189 Gostos 3
Troféus totais: 31
Trófeus: (Ver todos)
Level 6 Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

Pois, mas eu quero que as 2 laterais tenham o mesmo tamanho que a div
E eu colocado 100% nelas, elas vão, não até ao fim da div, mas até ao fundo da pagina.

Páginas: 1

Posts relacionados

HTML + CSS

Height 100% Div

J
João Godinho

UI & UX Design

Web design - CSS e HTML

R
RM7

Conversa Geral

Take your Business to a New Height with a Mobile App.

j
jaimru