Может быть случай, когда содержимое элемента может быть больше объема пространства, выделенного для него. Например, заданные свойства ширины и высоты не позволяют достаточно места для размещения содержимого элемента.

CSS предоставляет свойство overflow, которое сообщает браузеру, что делать, если содержимое окна больше, чем само окно. Это свойство может принимать одно из следующих значений:

Свойство Описание
visibleПозволяет содержимому переполнять границы содержащего его элемента.
hiddenСодержимое вложенного элемента просто обрезается на границе содержащего элемента, и полосы прокрутки не видны.
scrollРазмер содержащего элемента не изменяется, но полосы прокрутки добавляются, чтобы позволить пользователю прокручивать, чтобы увидеть содержимое.
autoЦель такая же, как и прокрутка, но полоса прокрутки будет отображаться только в том случае, если содержимое переполняется.

Вот пример -

< html>
   < head>
   < /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>
     
   < 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>

Это приведет к следующему результату -





Понравилась статья? Поделитесь ею с друзьями и напишите отзыв в комментариях!

We use cookies on our website. Some of them are essential for the operation of the site, while others help us to improve this site and the user experience (tracking cookies). You can decide for yourself whether you want to allow cookies or not. Please note that if you reject them, you may not be able to use all the functionalities of the site.

Ok