Barra de Rolagem em Div

[sr.silva 1]

Pessoal,

 

Como verifico se uma DIV necessita ter uma barra de rolagem?

 

Veja a imagem:

 

Imagem

 

Quando há uma mensagem grande, coloco uma barra de rolagem...já quando há uma mensgem de 2 ou 4 linhas não há barra de rolagem.

 

[]s

 

 

 

 

[Henrique Barcelos 290]

Assim:

height: 400px; /*valor fixo*/
overflow: auto;

[Diéssica 140]

Assim:

height: 400px; /*valor fixo*/
overflow: auto;

 

Ou seja: determine a altura do box no CSS.

 

Por exemplo, a class da minha DIV se chama "conteudo". Nessa DIV vou determinar o valor da height (altura) de 200px, os textos que forem maiores e ultrapassarem a altura da minha DIV, automaticamente irão aparecer com barra de rolagem.

 

Código:

.conteudo {
height: 200px;
overflow: auto;
}

 

O código da minha DIV:

<div class="conteudo">Primeiro conteudo. Nao ultrapassa.</div>
<div class="conteudo">Segundo conteudo. Encha aqui ate ultrapassar os 200px e aparecer a barra de rolagem.</div>

 

Os dois trabalhando juntos:

(Obs: não vou colocar um texto gigante que ultrapasse os 200px para não floodar a página, mas para testar, preencha o "Segundo conteudo" até ultrapassar)

<style>
.conteudo {
   height: 200px;
   overflow: auto;
}

<div class="conteudo">Primeiro conteudo. Nao ultrapassa.</div>
<div class="conteudo">Segundo conteudo. Encha aqui ate ultrapassar os 200px e aparecer a barra de rolagem.</div>
</style>

 

E se quiser, disponibilizei um exemplo online que está funcionando com a barra de rolagem. Se quiser, pode copiar o código completo de lá também.

http://www.diessicagurskas.com/exemplo/rolagem.html

[sr.silva 1]

Oi..

 

Justamente cheguei nessa situação antes de colocar minha dúvida.

 

No seu exemplo...o texto que não ultrapassa tem um espaço em branco...esse que eu não quero.

Não quero deixar esse espaço "desnecessário" para os textos que não sejam grandes.

 

 

[]s

 

 

 

[Diéssica 140]

Oi..

 

Justamente cheguei nessa situação antes de colocar minha dúvida.

 

No seu exemplo...o texto que não ultrapassa tem um espaço em branco...esse que eu não quero.

Não quero deixar esse espaço "desnecessário" para os textos que não sejam grandes.

 

 

[]s

Não sei se entendi, você quer determinar um tamanho máximo em um box? Os textos trabalham e se ajustam normalmente, porém, se passarem de uma altura X eles irão aparecer com barra de rolagem, estou certa?

 

[]s,

Diéssica Gurskas

[sr.silva 1]

a altura fixa é o que não devo colocar.

 

...ou seja a altura tem que ser de acordo com o tamanho do texto.

[Diéssica 140]

Silva,

a altura fixa e overflow automático servem para que o objeto identifique que se o conteúdo posto nele passar de X px irá aparecer uma barra de rolagem. Por isso pergunto para você e espero que seja claro: o seu problema não é com a altura fixa e nem com o overflow, e sim com os espaços em branco que aparecem quando determino essa altura, certo?

 

Por exemplo, tenho uma página de notícias. Porém, minha página é pequena e terei que usar barras de rolagem caso o conteúdo for muito grande, tendo que optar pela altura fixa e overflow. Mas também não posso deixar os espaços em branco que irão aparecer quando eu determiná-la, ocupando inutilmente quase que toda a minha página. Então penso que os textos que não ultrapassem a altura fixa (sem barra de rolagem) deverão redimensionar-se automaticamente.

 

É esse o seu problema?

E por favor, pode postar seu código completo?

 

[]s,

Diéssica Gurskas

[sr.silva 1]

Meu código esta como esse:

 

 

height: 200px;

overflow: auto;

[Diéssica 140]

Meu código esta como esse:

 

 

height: 200px;

overflow: auto;

 

Mande a página completa, não só o CSS.

 

O seu problema não é com a altura fixa e nem com o overflow, e sim com os espaços em branco que aparecem quando determino essa altura, certo?

 

[]s,

Diéssica Gurskas

[sr.silva 1]

sim. só que o espaço aparece em decorrencia da altura fixa.

 

 

veja que no exemplo, o texto que está grande não há espaços...diferente do texto menor.

[Diéssica 140]

sim. só que o espaço aparece em decorrencia da altura fixa.

 

 

veja que no exemplo, o texto que está grande não há espaços...diferente do texto menor.

 

Sim Silva, o que eu quis dizer é que não é por isso que você vai deixar de usá-la.

 

Agora entendi.

 

Você vai utilizar este conteúdo para que? Ele vai ser gerenciado por um sistema ou vai ser adicionado manualmente?

 

Se for manualmente, já pensou em não colocar altura fixa nas DIVs que você vai colocar um texto menor e nas DIVs que você for colocar textos maiores colocar altura fixa? É uma solução simples.

 

[]s,

Diéssica Gurskas

[sr.silva 1]

As informações são adicionadas por um sistema...podendo ter 1 ou N linhas;

[Diéssica 140]

As informações são adicionadas por um sistema...podendo ter 1 ou N linhas;

 

Experimentou include php/Javascript?

 

[]s,

Diéssica Gurskas