Dúvida de uso de CSS

Olá augustovieira,

Seguinte qualquer div no html pode ter um scroll mas para que esse scroll apareça corretamente você tem que definir um tamanho fixo para o div e adicionar valor ao atributo overflow que aceita scroll, auto ou none.

Como funciona o overflow :

none - Nunca é exibido o scroll, caso o conteúdo do div ultrapassar o tamanho permitido a parte ultrapassada será ocultada.
auto - O scroll é exibido sempre que o conteudo do div ultrapassar o tamanho permitido.
scroll - O scroll sempre estará visivel independente do conteúdo.

Para sumir com a barra de rolagem do navegador, você tem que fazer com que o seu conteúdo do seu site NUNCA ultrapasse o tamanho máximo da tela, pq se ele ultrapassar a barra do navegador será ativada. Para isso você pode utilizar o plugin Dimensions do Jquery que te ajuda com esses detalhes.

Segue abaixo um exemplo de como poderia ficar seu css:

div.cabecalho {
     float: left;
     width: 100%;
     height: 300px;
}

div.conteudo {
    float: left;
    width: 100%;
    height: 400px; /*esse valor deve ser ajustado de acordo com o tamanho da sua tela, se sua tela for grande esse valor deverá ser aumentado */
    overflow: scroll;
}

ps: Se não me engano o scroll não funciona quando você coloca o tamanho do objeto em porcentagem sendo assim defina o seu tamanho sempre em unidades fixas como pixel (px).

Espero que tenha ajudado !

Abraçooo !

Obrigado pela ajuda mas eu já tinha feito isto. O que eu queria era que a altura do meu conteúdo se auto ajustasse, pois não posso colocar um tamanho fixo por alguns motivos:

1- As dimenções mudam de navegador para navegador;

2- Existem diferentes tipos de tamanhos de tela;

3- O usuário pode estar com zoom na tela.

Existe algum mode de fazer isso? Como funciona esse esquema do JQuery?

augustovieira,

Faz um tempo que mechi com Jquery Dimensions, procurei ele no site de plugins para Jquery e não achei. Mas ele basicamente serve para obter as dimensões de um determinado objeto somando as bordas e tals. Uma outra alternativa é usar o código abaixo para obtermos o tamanho da janela do browser:

window.innerHeight

Com isso você pode escrever algo assim, se estiver usando o jquery :

<script type='text/javascript'>
    $(document).ready(function() {
        var navegadorHeight = window.innerHeight;
        var topoHeight = $("#id_do_topo").
        var conteudoHeight = navegadorHeight - topoHeight;
        $("#id_do_conteudo").css("height", conteudoHeight + "px");
    }
</script>

http://api.jquery.com/resize/

Boa skybot,

Fica a dica esse eu não conhecia.

Abraçoos !

Não conheço muito jquery porém tenho em minha aplicação, como o navegador saberá quando executar esse script? ou logo ao abrir a tela ela vai executar?

<script type='text/javascript'>
	    $(document).ready(function() {
	        var navegadorHeight = window.innerHeight;
	        var topoHeight = 100;
	        var conteudoHeight = navegadorHeight - topoHeight;
	        $("#conteudo").css("height", conteudoHeight + "px");
	    }
</script>

A linha abaixo indica que ao carregar a pagina execute o que esta dentro dela

$(document).ready(function() {  

  /** quando carregar a pagina execute o código que esta aqui **/

})

Abraçoo