← HTML + CSS

[RESOLVIDO] Propriedade CSS Overflow não funciona

Lida 9641 vezes

Offline

Evair_peterson 
Membro
Mensagens 5 Gostos 0
Troféus totais: 12
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 2 Level 1 First Post Karma Fifth year Anniversary Fourth year Anniversary Third year Anniversary

Olá a todos.

Estou tendo problemas com a propriedade overflow nesta página que estou desenvolvendo:
www.evairpeterson.com.br/duvidas/overflownaofunciona.html

O problema é que a barra de rolagem vertical não aparece nem quando o texto da DIV "right" contém textos demais, não cabendo nela.
É desejável que em casos como este, onde a listagem vai desde TESTE 1 até TESTE 99 aparecesse uma barra de rolagem vertical à direita da página.

Normalmente eu agregaria ao CSS da DIV "right" o seguinte código:

Código: [Seleccione]
overflow-y:auto;Mas não sei porque isso não está funcionando.
Alguém sabe como resolver este problema?


Desde já agradeço toda e qualquer ajuda.
Saudações vindas do Brasil, EVAIR.
Offline

elitepc 
Membro
Mensagens 28 Gostos 0
Troféus totais: 14
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 10 Posts First Post Karma Fifth year Anniversary

Basta estabelecer o limite de altura da div. O que está a acontecer é que a página é muito grande e ao colocares como posição absoluta, juntamente com o overflow hidden, ele não te deixa fazer scroll.

Coloca-lhe isto no #right:

overflow-y: auto;
max-height: 100%;


Penso que era isto que querias.


Edit: Caso queiras a barra mesmo do lado direito da página, tira apenas o position: absolute; da div major
Offline

Evair_peterson 
Membro
Mensagens 5 Gostos 0
Troféus totais: 12
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 2 Level 1 First Post Karma Fifth year Anniversary Fourth year Anniversary Third year Anniversary

Era exatamente isso mesmo!!!

Não sei como lhe agradecer. Já vinha buscando esta informação há muitas horas, pedi ajuda em fóruns do Brasil, Espanha e dos Estados Unidos e ninguém conseguiu me ajudar.
Espero que algum dia, dentro das limitações de minha grande ignorância eu posso lhe retribuir a ajuda.


Saudações brasileiras... EVAIR

 :obrigado:
Offline

elitepc 
Membro
Mensagens 28 Gostos 0
Troféus totais: 14
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 10 Posts First Post Karma Fifth year Anniversary

Sem problema ;)
Boa sorte com o projecto, qualquer dúvida que tenha, disponha, o pessoal está aqui para se entre-ajudar.
Offline

Evair_peterson 
Membro
Mensagens 5 Gostos 0
Troféus totais: 12
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 2 Level 1 First Post Karma Fifth year Anniversary Fourth year Anniversary Third year Anniversary

Testei também o que você me sugere em:

Edit: Caso queiras a barra mesmo do lado direito da página, tira apenas o position: absolute; da div major

Fazendo isso eu teria a barra de rolagem no lugar certo, que é no extremo direito da página. Porém, a DIV "right" não ocuparia mais 100% da página na vertical, como é desejado.

Aí pensei um pouco mais sobre o que você me disse em:

O que está a acontecer é que a página é muito grande e ao colocares como posição absoluta, juntamente com o overflow hidden, ele não te deixa fazer scroll.

Assim que experimentei manter a DIV "right" exatamente como ela estava e mudei apenas o overflow da DIV "major" de HIDDEN para AUTO.
E com isso sim tenho 100% do meu problema resolvido, da maneira mais adequada possível.


Novamente faço questão de dizer que sua ajuda foi muito importante.
Obrigado. De verdade! Abraços...
Offline

elitepc 
Membro
Mensagens 28 Gostos 0
Troféus totais: 14
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 10 Posts First Post Karma Fifth year Anniversary

Sendo assim, visto que já não utilizas mais overflow hidden, podes simplesmente tirar esta linha de código. Overflow: auto é o default e se não houver nada especificado em contrário, é usado esse.

Tinha-me enganado no edit, não era o position absolute para tirar, era o overflow. Mas parece que chegaste rapidamente a essa conclusão :)

Boa continuação de trabalho ;)
Offline

Evair_peterson 
Membro
Mensagens 5 Gostos 0
Troféus totais: 12
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 2 Level 1 First Post Karma Fifth year Anniversary Fourth year Anniversary Third year Anniversary

Eu até tentei remover completamente o overflow da DIV "major", porém ao tirá-lo, a última linha do texto contido nesta DIV ficou um pouco escondida sob o rodapé da página e mantendo o overflow:auto não tive este problema, não sei porque.

Mas independente de qualquer coisa, com o overflow:auto a coisa funcionou perfeitamente.


Abraço. EVAIR.
Offline

elitepc 
Membro
Mensagens 28 Gostos 0
Troféus totais: 14
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 3 Level 2 Level 1 10 Posts First Post Karma Fifth year Anniversary

Assim rapidamente, não sei porque é que se está a comportar de forma diferente com o overflow em auto.

No entanto, caso queiras tirar esse overflow, apenas precisas de escrever colocar na div right: padding-bottom: 25px;
Offline

Evair_peterson 
Membro
Mensagens 5 Gostos 0
Troféus totais: 12
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 2 Level 1 First Post Karma Fifth year Anniversary Fourth year Anniversary Third year Anniversary

 :ideia:

"Quando eu crescer quero ser igual a você"... Hehehehe
De novo resolvido de pronto... Eliminei o overflow da DIV "major" e inseri na DIV "right" padding-bottom:25px, e funcionou perfeitamente também!!!

É fato que eu ainda preciso estudar muito de CSS para conseguir me virar sozinho sem ter de perturbar outras pessoas.
Ainda bem que existem boas almas neste mundão dispostas a ajudar àqueles com menos conhecimentos.  :grin:


Agora vou dormir, pois já é 3 horas da manhã aqui no Brasil.
Muito obrigado por tudo! Até mais...
Zzzzzzzz