CSS - estouro

Descrição

A propriedade overflow determina como o conteúdo que ultrapassa a área de conteúdo de seu elemento deve ser tratado.

Valores possíveis

visible - O conteúdo transbordando deve ser exibido.
hidden - Conteúdo transbordando não deve ser exibido.
scroll - O conteúdo transbordando não deve ser exibido, mas o agente do usuário deve fornecer alguns meios de acessar o conteúdo oculto (por exemplo, um conjunto de barras de rolagem).
auto - O comportamento causado por este valor depende do navegador.

Aplica-se a

Todos os elementos HTML.

Sintaxe DOM

object.style.overflow = "scroll";

Exemplo

Aqui está o exemplo -

<html>
   <head>
      <style type = "text/css">
         .scroll {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:scroll;
         }
         .auto {
            display:block;
            border: 1px solid red;
            padding:5px;
            margin-top:5px;
            width:300px;
            height:50px;
            overflow:auto;
         }
      </style>
   </head>

   <body>
   
      <p>Example of scroll value:</p>
      
      <div class = "scroll">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      <br />
      
      <p>Example of auto value:</p>
      
      <div class = "auto">
         I am going to keep lot of content here just to show you how 
         scrollbars works if there is an overflow in an element box. 
         This provides your horizontal as well as vertical scrollbars.
      </div>
      
   </body>
</html>

Isso produzirá o seguinte resultado -

↰ Previous page