Как расположить объект в низу корзины и сделать правильный скрол?
Здравствуйте, есть вот такая проблема, у блока с счётчиком и кнопками «Закрыть» и «Оформить». Когда добавляется прокручивание получается вот такое как на картинках. Мне нужно чтобы блок с счётчиком и кнопками, «Закрыть» и «Оформить» был всегда внизу корзины. Знаю, что есть вариант с position: fixed, но мне нужен другой способ. Есть на гит хабе сайт, вот ссылка: https://nikitaharp.github.io/Site/ , там код посмотрите, может чуть запутано потому, что я делал корзину по гайду из ютуба, помогите пожалуйста.
Картинки для того, чтобы объяснить, что я имею ввиду.
Дополнительно:
Гриды, флексы.
И позиционирование корзины имеет смысл поправить, сейчас уходит за верх окна.
Ответы:
можно использовать display: flex и задать flex-direction: column;
вот примерный код:
<div class="basket__items"> <div class="items"> items </div> <div class="basket"> basket </div> </div> <style> .basket__items { display: flex; flex-direction: column; max-height: 150px; overflow-y: scroll; } .items { min-height: 150px; } </style> |
<div class="basket__items"> <div class="items"> items </div> <div class="basket"> basket </div> </div> <style> .basket__items { display: flex; flex-direction: column; max-height: 150px; overflow-y: scroll; } .items { min-height: 150px; } </style>
- Нашел я ответ, position: sticky, и top: (...)px, выставить так чтобы он был внизу нужного блока, может у кого-то будет такая же проблема.
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Чтобы расположить объект в низу корзины и сделать правильный скролл, вам нужно использовать CSS и JavaScript. Вот пример кода, который поможет вам решить эту задачу:
1. HTML:
```html
```
2. CSS:
```css
.cart {
height: 300px; /* Высота корзины */
overflow-y: scroll; /* Включаем вертикальный скролл */
}
.items {
position: relative;
}
.item {
/* Стили для товаров */
}
```
3. JavaScript:
```javascript
var cart = document.querySelector('.cart');
cart.scrollTop = cart.scrollHeight; // Помещаем скролл вниз корзины
// Для автоматического скролла при добавлении нового товара
function addToCart(item) {
var items = document.querySelector('.items');
items.appendChild(item);
cart.scrollTop = cart.scrollHeight;
}
```
Этот код создаст корзину с вертикальным скроллом и поместит объект в низ корзины. Вы также можете использовать функцию `addToCart` для автоматического скролла при добавлении новых товаров.
Надеюсь, это поможет вам решить вашу проблему! Если у вас есть дополнительные вопросы, не стесняйтесь спрашивать.