Как можно создать отступ справа в DIV, который имеет вертикальное переполнение (overflow) с помощью CSS, чтобы этот отступ появлялся, только если происходит переполнение, и исчезал, когда переполнения нет?
Чтобы добавить `padding-right` только в случае переполнения контента, можно воспользоваться следующим подходом:
1. Установите `overflow-y: auto;` для вашего DIV элемента. Это позволит создать вертикальную прокрутку только в случае переполнения контента.
2. Добавьте дополнительный `padding-right` к вашему DIV элементу, который будет виден только при появлении вертикальной прокрутки. Например:
```css
div {
width: 300px;
height: 200px;
overflow-y: auto;
padding-right: 10px; /* Дополнительный отступ справа */
}
```
3. При этом вы можете использовать `calc()` функцию для изменения `padding-right` в зависимости от наличия вертикальной прокрутки. Например:
```css
div {
width: 300px;
height: 200px;
overflow-y: auto;
padding-right: calc(10px + 17px); /* 17px - ширина полосы прокрутки (при необходимости уточните эту величину для вашего браузера) */
}
```
Таким образом, отступ справа будет добавляться только в случае переполнения контента и будет исчезать при его отсутствии.
Для ширины скролла есть небольшой магический хак:
Если 100% - ширина экрана, то:calc(100vw - 100%)- ширина сколлбара. Используя это - можно что-то намагичить.:)