Свойство 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.

Читайте также

Обсуждение (0)

Войдите или зарегистрируйтесь для того чтобы оставлять комментарии