← HTML + CSS

Height 100% Div

Lida 6603 vezes

Offline
J

João Godinho 
Membro
Mensagens 1755 Gostos 2
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

Olá Mais Tráfeguianos,
A minha dúvida é como meter um div com height 100%, mas essa div está dentro de outra div, alinhada à direita e tem ao lado uma div com os posts, que como é maior o background dessa div não vai até ao fim.

Fiz uma pesquisa no Google, mas os resultados são muito confusos.

Desculpem se não me expliquei bem, se não entenderem digam. ;)

Obrigado ;)
Offline
b

betanalista 
Membro
Mensagens 2564 Gostos 0
Feedback +18

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

experimenta fazer um float na div que queres que tenha um height de 100%

exemplo

a
b
/b
c
/c
a

se a div b tiver um float e a div c também, deves colocar um float na div a e já funciona como queres
Offline

Riey 
Membro
Mensagens 1001 Gostos 0
Feedback +4

Troféus totais: 30
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

Eu não percebi a dúvida... Se te poderes exprimir com desenhos :p
Offline
J

João Godinho 
Membro
Mensagens 1755 Gostos 2
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

Citação de: Riey em 15/Fev/2011 21:46
Eu não percebi a dúvida... Se te poderes exprimir com desenhos :p
Código: (html4strict) [Seleccione]
<div id="wrap">
<div id="conteudo">
Posts e etc
</div>
<div id="sidebar">
Widgets
</div>
</div>Como o conteúdo tem mais conteúdo que a sidebar, tem mais height, e eu quero que a sidebar acompanhe a div em height até ao fundo.
Offline

Riey 
Membro
Mensagens 1001 Gostos 0
Feedback +4

Troféus totais: 30
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

Só estou a ver 2 maneiras...

1º - javascript
2º - colocares o background na div #wrap de maneira a posicionar-se no local do sidebar... as div interiores crescem, essa também, e o background também...
Offline
b

betanalista 
Membro
Mensagens 2564 Gostos 0
Feedback +18

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Citação de: João Godinho em 15/Fev/2011 22:03
Código: (html4strict) [Seleccione]
<div id="wrap">
<div id="conteudo">
Posts e etc
</div>
<div id="sidebar">
Widgets
</div>
</div>Como o conteúdo tem mais conteúdo que a sidebar, tem mais height, e eu quero que a sidebar acompanhe a div em height até ao fundo.

Então é o que eu disse, isto caso tenhas o background na div wrap. Neste caso se tiveres por exemplo na div conteudo um float:left; e na div sidbar um float:right; ao colocares na div wrap float:left;background:#000; já aparece como queres
Offline
J

João Godinho 
Membro
Mensagens 1755 Gostos 2
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

Citação de: Riey em 15/Fev/2011 22:18
Só estou a ver 2 maneiras...

1º - javascript
2º - colocares o background na div #wrap de maneira a posicionar-se no local do sidebar... as div interiores crescem, essa também, e o background também...
Pois já tinha pensado na 2ª maneira, mas como isto parece tão simples, pensei que pudesse haver algum hack.
Offline

Riey 
Membro
Mensagens 1001 Gostos 0
Feedback +4

Troféus totais: 30
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Poll Starter Level 5 Level 4 Level 3

experimenta...
Offline

Pedro Lopes 
Beta tester
Mensagens 3568 Gostos 18
Feedback +6

Troféus totais: 32
Trófeus: (Ver todos)
Level 6 Windows User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3

Podes usar o min-height: xxxpx;

Se é que percebi a duvida...
Offline
b

betanalista 
Membro
Mensagens 2564 Gostos 0
Feedback +18

Troféus totais: 26
Trófeus: (Ver todos)
Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2 Level 1

Citação de: Pedro Lopes em 16/Fev/2011 19:07
Podes usar o min-height: xxxpx;

Se é que percebi a duvida...

isso não resulta porque as páginas terão tamanhos diferentes, ou seja quando a página do conteúdo for demasiado pequena a sidebar será demasiado grande e quando a página do conteúdo for demasiado grande a página da sidebar é demasiado pequena.
Offline
J

João Godinho 
Membro
Mensagens 1755 Gostos 2
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

Pois, optei pela maneira de meter o background na div que contêm tudo.
Offline

rocha93 
Membro
Mensagens 34 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Poll Voter Level 4 Level 3 Level 2 Level 1 10 Posts First Post

é como o betanalista disse, se colocares um float em todas as div's (float:left;), é mais fácil.

Código: [Seleccione]
#wrap { width:1000px; height:100%; float:left; }
#conteudo { width:600px; height:100%; float:left; }
#sidebar { width:350px; height:100%; flost:left }
com isto de certeza que resulta, e depois escolhes o background que queres em cada.. :)
e à medida que aumentas o #conteudo ou #sidebar, o #wrapper também aumenta ;)

 - não sei se já resolveste, mas aqui fica uma ajuda xD
Offline
J

Jeckerson 
Membro
Mensagens 34 Gostos 0
Feedback +1

Troféus totais: 22
Trófeus: (Ver todos)
Level 5 Level 4 Nineth year Anniversary Eighth year Anniversary Super Combination Combination Topic Starter Poll Voter Level 3 Level 2

Código: (html4strict) [Seleccione]
<body style="height: 100%;">
<div id="wrap">
<div style="float: left;" id="conteudo">
Posts e etc
</div>
<div id="sidebar" style="float: left; width: 100px;height: 100%; background: black;">
Widgets
</div>
</div>
</body>

Páginas: 1

Posts relacionados

HTML + CSS

[HTML + CSS] Auto Height

H
Henrique Mouta

HTML + CSS

Div não assume altura das divs interiores

Tjda

UI & UX Design

div fixa ao lado de div 100%

a
alexandremdn