Barra de Rolagem em uma div ou em outras tags

Bem depois de um bom tempo voltei a atualizar meu blog

uma grande mudança é que apague tudo pois já aprendi muito mais que eu sabia antes, assim passarei mais melhores para vocês

Uma grande ajuda a todos webmasters hoje em dia é o css. Além de deixar o site mais rapido ele também lhe proporciona grandes ferramentas boas se usar.

Quem ainda não viu uma barra de rolagem em algum site no meio da tela… ai pode ser que alguem pesse, mas posso fazer iframe…

mas só pra ter barra de rolagem no meio da tela pra mostrar alguma coisa você irá chamar um iframe ?? Isso deixará seu site mais lerdo pois ele terá de puxar mais de 1 página

um jeito muito simples é usar a função overflow do css [saiba mais sobre o overflow]

Só que o overflow para se mostrar é bom você definir tanto altura quanto largura.

Vamos ver um exemplo simples usado em tabelas

<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<div style="overflow:auto;height:200px; width:250px">
 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc id  magna. Etiam suscipit feugiat nulla. Donec facilisis felis id neque.  Proin vulputate mi sit amet tortor. Nunc consectetuer, quam et  vulputate faucibus, lorem enim aliquet felis, non tempus libero mi nec  dui. Nulla non urna ut justo molestie ornare. In hac habitasse platea  dictumst. Etiam at est vel lorem ultrices auctor. Vestibulum imperdiet,  risus id consectetuer placerat, est pede auctor leo, nec ullamcorper  orci leo at enim. Fusce odio. Fusce mollis. Etiam posuere magna eu  libero. Vestibulum et nibh sit amet dui molestie tempus. Maecenas at  libero. Phasellus sem magna, porta suscipit, sollicitudin eu,  vestibulum quis, metus. Nulla interdum ultrices dui. 

Praesent malesuada mi quis nisl. Nullam eu erat adipiscing purus  sodales pharetra. Integer tellus libero, faucibus a, vestibulum ac,  commodo in, lacus. Nullam nec mi et leo varius pharetra. Nullam porta  consequat arcu. Quisque vestibulum pede scelerisque dui. In dictum. In  ultrices luctus erat. Mauris laoreet orci ullamcorper dui. Nullam quis  turpis. Donec aliquet laoreet dui. Cras quis elit in erat tempor  tempus. Mauris nec sapien sit amet leo sollicitudin rhoncus. Fusce sit  amet neque.</div></td>
</tr>
</table>

Olhem na quarta linha : <div style=”overflow:auto;height:200px; width:250px”>…

Chamamos a opção Style para podermos insirir o overflow, isso porque o overflow é uma propriedade do css, e o css só funciona em quando você define um estilo ou quando vc usa a função style dentro de qualquer tag html

No caso inserirmos também width(largura) e um height(altura) pois, sem isso não irá funcionar

Como colocar barra apenas na horizontal/ Vertical ??

Simples para horizontal use overflow-x no lugar de overflow
ou para vertical use overflow-y no lugar de overflow

8 comentários sobre “Barra de Rolagem em uma div ou em outras tags

  1. VALEW!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! tava precisando!!!!!

  2. VLW , puxa vida resolveu meio mundo!!!!!!!!!!!!!!!!!!!

  3. Me ajudou muito mesmo!!!!!!! obrigada

  4. Pust Cara exatamente o que eu procurava muito obrigado !!!!

  5. Vocês podem me ajudar?
    Preciso colocar um texto com bordas no topo, abaixo e nos lados dentro em uma div com barra de rolagem não to conseguindo configurar as margens do texto. Pois não quero o texto colado nas bordas da caixa.
    Valeu. Obrigado.

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alteração )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alteração )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alteração )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alteração )

Conectando a %s