Создание ширины на CSS: 100% минус 100px – решение
Быстрый ответ
При необходимости установить ширину элемента на всю доступную ширину с вычетом 100 пикселей, подойдёт функция calc()
:
.your-element {
width: calc(100% – 100px);
}
Такой подход позволяет элементу занимать все свободное пространство, но при этом оставлять границу в 100 пикселей, что обуславливает отзывчивый дизайн.
Поддержка браузерами
Функцию calc()
поддерживает большая часть современных браузеров. В случае использования устаревших браузеров допустим вариант реализации с применением jQuery:
if (!('calc' in document.documentElement.style)) {
$('.your-element').css('width', 'auto').css('width', function() {
return $(this).parent().width() – 100;
});
}
Добавляем отзывчивость с использованием единиц вьюпорта
Применение единиц вьюпорта vw
и vh
делает ваш дизайн ещё более гибким:
.your-element {
width: calc(100vw – 100px); // 100% вьюпорта с вычетом 100 пикселей
}
Однако стоит учесть, что мобильные браузеры с автоскрытием панелей могут некорректно работать с единицами вьюпорта.
Предупреждаем переполнение содержимого как эксперты
Для предотвращения переполнения применяем отступы и clearfix:
.your-element {
margin-right: 100px; // Оставляем отступ в 100 пикселей
}
.clearfix {
clear: both; // Убираем последствия применения float
}
Синтаксис: придираемся к мелочам
Не забывайте о пробелах внутри calc()
, иначе могут возникнуть ошибки:
.your-element {
width: calc(100% – 100px); // Правильный синтаксис
}
Вложенные div'ы: применяем принцип матрешки
В качестве альтернативы функции calc()
можно использовать вложенные div'ы с отступами:
.outer {
width: 100%; // Устанавливаем ширину внешнего блока
}
.inner {
margin-right: 100px; // Добавляем отступ для внутреннего блока
}
Ошибки синтаксиса: контроль от CSS-полиции
Проверьте наличие единиц измерения после чисел: без них код работать не будет:
.your-element {
width: calc(100% – 100px); // Синтаксически правильный вариант с указанием px
}
Flexbox и Grid: неоценённые герои
Flexbox или Grid могут стать хорошей альтернативой, если calc()
по какой-либо причине не выходит.
Визуализация
Представьте себе ситуацию, когда вам нужно разместить элемент (🚗) на странице шириной в 100% (🚧), оставив при этом препятствие (🚫) шириной в 100 пикселей.
.space {
width: calc(100% – 100px); // 🚗 располагается так, чтобы не коснуться 🚫
}
Использование calc()
– это выбор идеального автомобиля для вашего гаража.
Сочетание разных единиц измерения в calc()
Функция calc()
позволяет комбинировать различные единицы измерения:
.example {
width: calc(100% – 2em – 5%); // Более тонкая регулировка ширины
}
Это даёт возможность управлять шириной элементов ещё более точно и гибко.
Особенности вложенных div'ов
Работая с вложенными div'ами, учеть влияние padding и border-box:
.container {
width: 100%;
padding: 10px;
box-sizing: border-box; // Учитывая отступы в общей ширине
}
.child {
width: calc(100% – 100px); // Изменение ширины с учётом правил внешнего блока
}
Полезные материалы
- calc() – CSS: Каскадные таблицы стилей | MDN
- Блочная модель – Обучение веб-разработке | MDN
- Несколько случаев использования Calc() | CSS-Tricks
- Интересное применение единиц вьюпорта | CSS-Tricks
- Наглядное руководство по свойствам CSS3 Flexbox | DigitalOcean
- Полное руководство по CSS Grid | CSS-Tricks
- CSS Margin