Загрузка...

Как создать div блок с прокруткой

Тема в разделе Веб-разработка создана пользователем nik555nik_inactive217582 27 ноя 2017. 407 просмотров

  1. nik555nik_inactive217582
    nik555nik_inactive217582 Автор темы 27 ноя 2017 1 27 ноя 2017
    О полезном свойстве overflow

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

    overflow-x - отвечает за отображением содержания блочного элемента по горизонтали.
    overflow-y - отвечает за отображением содержания блочного элемента по вертикали.

    Код CSS

    CSS:
    Код
    .prokrutka {
    
overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если содержимое больше блока */
    
}
    Свойства и значения overflow

    visible - отображается все содержание элемента, даже за пределами установленной ширины.
    hidden - отображается только область внутри элемента, остальное скрыто.
    scroll - принудительно добавляется горизонтальная или горизонтальная (x) полоса прокрутки.
    auto - автоматом добавляется горизонтальная полоса прокрутки, в случае если блок меньше.

    Рассмотри пример класса CSS. В width и height устанавливаем нужные нам ширину и высоту блока (за них не будет выходить содержимое блока), а свойством overflow: auto; задаем прокрутку по горизонтали в случае надобности

    Код CSS

    Код:
    Код
    .prokrutka {
    
width:150px; /* ширина нашего блока */
    
height:100px; /* высота нашего блока */
    
background: #fff; /* цвет фона, белый */
    
border: 1px solid #C1C1C1; /* размер и цвет границы блока */
    
overflow: auto; /* свойство для прокрутки по горизонтали. Автоматом, если больше блока */
    
}
    Принудительная установка прокрутки в блоке CSS

    Можно также принудительно создать прокрутку по высоте и ширине. Для этого каждой оси: overflow-y: scroll; (вертикаль) overflow-x: scroll; (горизонталь) укажем параметр scroll, принудительная прокрутка.

    Код HTML и CSS

    Код:
    Код
    .prokrutka {
    
height:150px; /* высота нашего блока */
    
background: #fff; /* цвет фона, белый */
    
border: 1px solid #C1C1C1; /* размер и цвет границы блока */
    
overflow-x: scroll; /* прокрутка по горизонтали */
    
overflow-y: scroll; /* прокрутка по вертикали */
    
}
    Пример div блока с прокруткой

    Код HTML и CSS

    Код:
    Код
    <html>
    
  <head>
    
   <title>Пример работы CSS</title>
    
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
    

    
<style>
    
.prokrutka {
    
height: 200px; /* высота нашего блока */
    
width: 200px; /* ширина нашего блока */
    
background: #fff; /* цвет фона, белый */
    
border: 1px solid #C1C1C1; /* размер и цвет границы блока */
    
overflow-x: scroll; /* прокрутка по горизонтали */
    
overflow-y: scroll; /* прокрутка по вертикали */
    
}
    
</style>
    

    
  </head>
    

    
  <body>
    
<div class="prokrutka">
    
А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации. А тут много-много разного текста и прочей информации.
    
</div>
    
  </body>
    
</html>
    Одно из свойств overflow можно убрать, тогда останется прокрутка только по одной оси, чего вполне достаточно.
     
    27 ноя 2017
  2. billy34
    Кому понравилось (1)
    billy34 27 ноя 2017 Курсор убери 432 10 дек 2016
    27 ноя 2017
Top
Загрузка...