Свойство overflow-y
Определяет, что делать с содержимым элемента, если оно не помещается в установленные размеры по оси Y
overflow-y: hidden;Пошаговый план! Как быстро научиться создавать сайты!
Chrome
Все
Edge
Все
FireFox
Все
IE
6+
iOS Safari
Все
Opera
Все
Safari
Все
Значения
overflow-y: visible;
Содержимое элемента, которое не помещается в его размеры по оси Y, не обрезается.
<style>
.example-1 {
width: 150px;
height: 50px;
overflow-y: visible;
background: #55bb61;
}
</style>
<div class="example-1">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Velit, fugiat, tempore, repellat totam maiores distinctio
eum odio eaque ratione debitis possimus modi asperiores.
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Velit, fugiat, tempore, repellat totam maiores distinctio
eum odio eaque ratione debitis possimus modi asperiores.
overflow-y: hidden;
Содержимое элемента, которое не помещается в его размеры по оси Y, обрезается.
<style>
.example-2 {
width: 150px;
height: 50px;
overflow-y: hidden;
background: #55bb61;
}
</style>
<div class="example-2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Velit, fugiat, tempore, repellat totam maiores distinctio
eum odio eaque ratione debitis possimus modi asperiores.
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Velit, fugiat, tempore, repellat totam maiores distinctio
eum odio eaque ratione debitis possimus modi asperiores.
overflow-y: scroll;
При необходимости содержимое элемента, которое не помещается в его размеры по оси Y, обрезается. Полоса вертикальной прокрутки всегда будет видна.
<style>
.example-3 {
width: 150px;
height: 50px;
overflow-y: scroll;
background: #55bb61;
}
</style>
<div class="example-3">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Velit, fugiat, tempore, repellat totam maiores distinctio
eum odio eaque ratione debitis possimus modi asperiores.
</div>
<br>
<div class="example-3">
Lorem ipsum dolor sit amet.
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Velit, fugiat, tempore, repellat totam maiores distinctio
eum odio eaque ratione debitis possimus modi asperiores.
Lorem ipsum dolor sit amet.
overflow-y: auto;
Содержимое элемента, которое не помещается в его размеры по оси Y, обрезается и появляется полоса вертикальной прокрутки.
<style>
.example-4 {
width: 150px;
height: 50px;
overflow-y: auto;
background: #55bb61;
}
</style>
<div class="example-4">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Velit, fugiat, tempore, repellat totam maiores distinctio
eum odio eaque ratione debitis possimus modi asperiores.
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Velit, fugiat, tempore, repellat totam maiores distinctio
eum odio eaque ratione debitis possimus modi asperiores.