CSS: Установка ширины div как 100% минус n пикселей

Быстрый ответ

Если требуется установить ширину div такой, чтобы она была равна 100% минус некое фиксированное значение, стоит обратиться к функции calc() в CSS. Вот как выглядит пример вычисления ширины за вычетом 40px:

div {
  width: calc(100% – 40px); /* Простые арифметические операции */
}

Замените 40px на необходимое вам значение и мгновенно настройте ширину элемента.

Сложные вычисления с помощью calc()

Функция calc() – это настоящий прорыв, позволяющий организовать сложные вычисления в очень простой форме. Особенно эта функция пригодится, когда требуется совместить фиксированные единицы измерений и проценты. Что позволяет легко и быстро выполнять вычисления для создания адаптивного дизайна, который will fit под любое разрешение экрана и гарантировать зафиксированное пространство для боковой панели или отступов.

.container {
  width: calc(100% – 200px); /* 200px резервируется под стильную боковую панель */
}
.content {
  width: calc(100% – 50px); /* 50px используется для создания дополнительного пространства */
}

Использование Flexbox для реструктуризации

Альтернативой привычному использованию calc() станет Flexbox. С его помощью элементы div смогут гибко распределить доступное пространство. Благодаря Flexbox и его свойствам flex-grow, flex-shrink и flex-basis масштабирование и адаптация элементов станет значительно удобнее.

.parent {
  display: flex; /* Переходим к использованию flex */
}

.child-fixed {
  width: 150px; /* Ширина зафиксирована */
}

.child-flexible {
  flex-grow: 1; /* Заполняем оставшееся пространство */
}

Совместимость с браузерами

Не забывайте, что использование функции calc() может столкнуться с проблемами совместимости с браузерами. Но не стоит волноваться – помощью может стать сайт caniuse.com. Для старых версий браузеров вендорные префиксы – надежное решение!

div {
  width: -webkit-calc(100% – 40px); /* Для старых версий Chrome и Safari */
  width: -moz-calc(100% – 40px);    /* Для старых версий Firefox */
  width: calc(100% – 40px);          /* Для современных браузеров */
}

Визуализация

Представьте, что есть железнодорожный путь, заполняющий всю долину на 100%. В конце этого пути находится неподвижная скала. Нашей задачей ставится расположить поезд таким образом, чтобы он не столкнулся со скалой.

Длина пути: 100%
Ширина скалы: 50px

Используем calc(), чтобы корректно определить длину поезда:

.train {
  width: calc(100% – 50px); /* Поезд проходит мимо скалы минуя столкновение! */
}

Сравниваем:

До: 🛤️🚂🪨 (Столкновение... О нет!)
После:  🛤️🚋🪨 (Великолепно, поезд идеально вписывается!)

В данном примере Поезд = Div, Скала = Фиксированные пиксели. Все понятно, верно?

Дополнительные рекомендации

Умное использование отступов

Несмотря на то что calc() очень удобная функция, иногда можно использовать альтернативный подход, установив padding или margin:

div {
  width: 100%;
  padding-right: 40px;
  box-sizing: border-box;
}

Подробнее об этом расскажет наш спикер на видео

Структурирование элементов

Желательно поддерживать чёткую иерархию ваших элементов. Это способствует лёгкому восприятию структуры документа. Ваш код устроен как художественное полотно!

Использование CSS-техник при необходимости

Обращайтесь к CSS-хакам только в случае крайней необходимости. Не забывайте о важности надёжности и соответствии стандартам в вашем коде!

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

1. calc() – CSS: Каскадные Таблицы Стилей | MDN — Подробная документация MDN по функции calc() в CSS.
2. Функция calc() в CSS — Руководство W3Schools описывает применение функции calc() в CSS.
3. Введение в основную модель боксов CSS – CSS: Каскадные таблицы стилей | MDN — Инфомативная статья о модели боксов CSS демонстрирует применение теории в практических примерах.
4. calc() как единица измерения CSS | Can I use... Справочные таблицы поддержки для HTML5, CSS3, etc — Проверьте поддержку функции calc() в различных браузерах.
5. CSS-макет – Свойство position — Учебное руководство по позиционированию в CSS, важный инструмент для работы с фиксированными размерами.
6. Создание внутренних соотношений для видео – A List Apart — Полезные советы о соотношениях сторон, важные для расчетов ширины элементов в адаптивном дизайне.