Создание ширины на 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); // Изменение ширины с учётом правил внешнего блока
}

Полезные материалы

1. calc() – CSS: Каскадные таблицы стилей | MDN
2. Блочная модель – Обучение веб-разработке | MDN
3. Несколько случаев использования Calc() | CSS-Tricks
4. Интересное применение единиц вьюпорта | CSS-Tricks
5. Наглядное руководство по свойствам CSS3 Flexbox | DigitalOcean
6. Полное руководство по CSS Grid | CSS-Tricks
7. CSS Margin