Модальное окно со скроллом контена и фиксированной шапкой
Всем привет! Не могу сделать модальное окно, с фиксированной шапкой и скроллом контента. Контент скроллится не до конца, только несколько первых элементов. Маленкая высота указана для примера.
.cart {
position: relative;
overflow: hidden;
width: 65%;
height: 200px;
margin: 100px auto;
background-color: #fff;
border-radius: 10px;
z-index: 200;
}
.cart__content {
height: 100%;
}
.cart__header {
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid #D9D9D9;
padding: 20px;
margin-bottom: 20px;
}
.cart__title,
.cart__btn {
font-size: 28px;
}
.cart__items {
height: 100%;
padding: 0 20px;
overflow-y: auto;
}
.cart__item {
margin-bottom: 15px;
}
.cart__wrapper {
position: fixed;
z-index: inherit;
left: 0;
top: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .8);
}
<div class="cart__wrapper">
<div class="cart">
<div class="cart__content">
<div class="cart__header">
<h4 class="cart__title">Cart</h4>
<button class="cart__btn">✖</button>
</div>
<ul class="cart__items">
<li class="cart__item">Item 1</li>
<li class="cart__item">Item 2</li>
<li class="cart__item">Item 3</li>
<li class="cart__item">Item 4</li>
<li class="cart__item">Item 5</li>
<li class="cart__item">Item 6</li>
<li class="cart__item">Item 7</li>
</ul>
</div>
</div>
</div>
Источник: Stack Overflow на русском