Como esconder um overflow DIV

Escrito por allen bethea Google | Traduzido por josé fabián
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como esconder um overflow DIV
As folhas de estilo em cascata ajudam no design da web (Comstock/Comstock/Getty Images)

O conhecimento de CSS (Cascading Style Sheets -- Folhas de estilo em cascata) dá ao designer de web um poder quase mágico sobre o formato do conteúdo de uma página da internet. Um designer habilidoso em CSS pode até fazer com que o texto e outros conteúdos pareçam desaparecer.

A propriedade DIV de CSS (Web page division -- Divisão de página web) lhe permite dividir seu conteúdo em blocos discretos. Cada bloco pode depois ser formatado e estilizado. O design de uma página geralmente dita que os blocos de conteúdo caibam em posições específicas, com altura e largura fixas. Às vezes, o tamanho do conteúdo de um bloco excede o espaço reservado para ele. Quando isto acontece, o conteúdo em excesso cobrirá outro conteúdo. O visitante da página verá um emaranhado de letras com alguns conteúdos por cima de outros. A propriedade "overflow" de CSS é uma forma de evitar que isto aconteça.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Software de edição de HTML
  • Navegador web

Lista completaMinimizar

Instruções

  1. 1

    Abra seu aplicativo de edição de HTML. Carregue a página web que contém o DIV que você quer editar. Se você estiver usando um editor WYSIWYG, passe para o modo HTML ou "Source" (Fonte), para ver e editar o código HTML.

  2. 2

    Selecione o DIV ao qual você quer aplicar a propriedade "overflow" (transbordar). A altura do DIV deve estar fixa em uma altura específica por meio da propriedade "height" (altura) de CSS. Por exemplo, se você quiser que o seu DIV tenha 200 pixels de altura, adicione este estilo CSS: "<DIV style="height: 200px">".

  3. 3

    Adicione o seguinte valor à propriedade do estilo DIV: "overflow:hidden;". A propriedade "overflow" (transbordar) lhe permite controlar a quantidade de conteúdo mostrado e evitar que passe por cima do resto, e além disso, tem vários valores possíveis: "visible" (visível), "hidden" (esconder), "scroll" (rolar), "auto" e "inherit" (herdar). O valor "hidden" (esconder) corta o conteúdo à altura do DIV. Por exemplo, se seu DIV tiver uma largura de 400 pixels e uma altura de 200, seu DIV será: "<DIV style="width: 400px; height: 200px; overflow: hidden">".

  4. 4

    Salve o arquivo. Teste seu design. Abra o navegador da web e carregue a página na qual você trabalhou. Qualquer conteúdo que não couber no limite de 200 pixels será cortado e escondido da vista. Ele continua aí, mas o visitante da página não o verá. Ajuste a altura do DIV até que possa mostrar a maior quantidade de conteúdo no espaço permitido pelo design da página.

Dicas & Advertências

  • Outra propriedade de "overflow" adiciona barras de rolagem à sua DIV. Adicionar "overflow: scroll" permite ao visitante usar barras de rolagem para ver todo o conteúdo.
  • Os navegadores web podem não mostrar corretamente as propriedades de largura, altura e overflow de CSS. Sempre teste seu trabalho com diferentes navegadores e sistemas operacionais, se for possível.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível