Редактируемые боковые панели в макете на основе Holy Grail

Question

С this layout (не мой, очевидно), я хочу изменить размер/скрыть боковые панели с помощью javascript. Перед написанием кода js я попытался вручную изменить ширину правого и левого столбцов. Проблема заключается в том, что при установке меньшего значения центральный столбец не заполняет освобожденную ширину. Но ширина основного столбца уже установлена ​​на 100%.

Так что мой вопрос:

Учитывая я хочу, чтобы уменьшить ширину левой колонки в 180px, что я должен изменить, чтобы также иметь основной столбец заполнить пробел?

Answer 1

Этот тип макета использует отступы для размещения боковых столбцов. Итак, если вы хотите, чтобы ваш левый столбец был 180px, с 10px отступов с каждой стороны, основной контейнер должен иметь левое дополнение 200px (ширина 180px + 10px padding * 2). Когда вы меняете ширину боковых панелей, вам нужно обновить отступы на основном контейнере, чтобы они соответствовали друг другу.