Height : 100% no CSS

[Chimpz 2]

Tópico fechado.

Motivo: Abandonado.

 

---

 

 

olá, estou tendo um pequeno problema com um site que estou desenvolvendo,

é o seguinte:

 

estou com minha <section> tranquilo, desenvolvi ela completa, mas na hora do CSS, quero deixar ela com o tamanho 100%, para já ficar responsivo, mas acaba que o tamanho não fica 100% (ou seja, não cobre todo conteúdo). vou deixar uma imagem explicando melhor a situação:

 

 

 

 

aí tenho que usar um tamanho que eu ache melhor tipo: section{height:100vh}, só que quando vai diminuindo a tela, acaba que o conteúdo fica fora, ou o tamanho fica grande demais, aí estou usando breakpoints no css e vou modificando o tamanho manualmente, mas não está ficando legal. o que posso fazer ?

 

(em alguns sections, funciona o height: 100%)

 

o que está errado ?

 

deu pra entender ?

[rnxn 2]

O elemento pai precisa ter altura definida.

 

Exemplo:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

obs: Resposta dada com base na falta de mais informações ^^

[Chimpz 2]

O elemento pai precisa ter altura definida.

 

Exemplo:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

obs: Resposta dada com base na falta de mais informações ^^

 

mas e se essa classe não tiver pai ?

 

(o body está com height: 100%)

 

então terei que fazer:

 

.equipe{

height:20vh;

}

 

#team{

height: 100%;

}

 

?

 

obrigado

[Cr4cko 1.212]

mas e se essa classe não tiver pai ?

 

(o body está com height: 100%)

 

então terei que fazer:

 

.equipe{

height:20vh;

}

 

#team{

height: 100%;

}

 

?

obrigado

 

Na verdade, cada icone, deveria ser um TEAM.

 

<div id="team">joao</div>

<div id="team">mario</div>

 

Se voce colocar um inline-block, e deixar o pai apenas com o width em 100%

ao ajustar o navegador ou acessar via mobile, automaticamente ele se ajusta (responsivo)

 

Veja o exemplo:

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

Abraços

[rnxn 2]

mas e se essa classe não tiver pai ?

 

(o body está com height: 100%)

 

então terei que fazer:

 

.equipe{

height:20vh;

}

 

#team{

height: 100%;

}

 

?

 

obrigado

 

Se o elemento está no body, o pai é o body.

>

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Só uma pergunta, você sabe como funciona as propriedades vh, vw, etc?

Pra mim você está querendo usar algo "novo" sem motivo. Pelo menos pro teu caso, não vejo necessidade.

[Cr4cko 1.212]

Você não precisa colocar 100% no body..

bote só um margin: 0; e tá ótimo, ele já ocupa 100% do seu monitor..

apenas coloque um inline-block, e width 100%

Se voce colocar equipe 100%, cada quadradinho da equipe, vai ocupar 100% do elemento pai (no seu caso o body).

Você precisa estabelecer o tamanho fixo do seu team. O que tem que ficar 100% é o pai..

E recomendo você não usar o body como elemento pai principalmente para algo responsivo.. sempre trabalhe com o maximo de organização possivel:

 

 

- header

-- menu

-- logo (ou ao contrario)

-corpo

-- slide

-- conteudo_team

--- team

- footer

-- footer links etc

 

Espero que tenha entendido... abraços

[Chimpz 2]

Você não precisa colocar 100% no body..

bote só um margin: 0; e tá ótimo, ele já ocupa 100% do seu monitor..

apenas coloque um inline-block, e width 100%

Se voce colocar equipe 100%, cada quadradinho da equipe, vai ocupar 100% do elemento pai (no seu caso o body).

Você precisa estabelecer o tamanho fixo do seu team. O que tem que ficar 100% é o pai..

E recomendo você não usar o body como elemento pai principalmente para algo responsivo.. sempre trabalhe com o maximo de organização possivel:

 

 

- header

-- menu

-- logo (ou ao contrario)

-corpo

-- slide

-- conteudo_team

--- team

- footer

-- footer links etc

 

Espero que tenha entendido... abraços

 

certo, valeu, ai ao Cr4cko e ao rnxn

irei refazer algumas coisas no código, seguindo as dicas.

 

ah sim, quer dizer a altura em relação ao viewport (tela)

[Dotfile 0]

Tenta usar a metatag viewport:

 

É necessário se cadastrar para acessar o conteúdo.

• Entre
• ou
• Cadastre-se

 

Poderia postar o código completo? Estranho é você usar EM que é uma medida relativa ao tamanho da fonte para definir a altura de uma section :indiferente:

[1Yekun 0]

Está usando floats?

Lembre-se que depois tem que usar o clear:both;