Часто ли приходится применять JavaScript для вычисления размеров и позиционирования элементов?

Question

[Роман Родионов]

Пока пользуюсь только чистым JS и CSS без препроцессоров. Закрепляю пройденный материал, так сказать.
Часто приходится позиционировать элементы или вычислять их размер с помощью JS.

Answer 1

[Александр Вульф]

Ну тут сложно сказать. Вообще, это не очень хороший тон. Все-таки для позиционирования лучше использовать CSS.
Однако, я, например, использую meteor как фреймворк. Если вкратце, то у меня страница собирается полностью на клиенте с помощью JS. Таким образом, я иногда хитрю и позиционирую особо сложные блоки в JS при генерации HTML этого блока (например, на основе введенных юзером данных).
Про вычисление размеров - это смотря зачем. У нас есть конструктор, где можно таскать край блока для задания произвольной ширины. Для сохранения в БД нам, естественно, нужно узнавать ширину блока.
Советую вам, уточните вопрос и тогда, может быть, будет более точный ответ :)

Comments

[Роман Родионов]

codepen.io/RRodionov/pen/rxOYba
Вот здесь, нужно, чтобы блок 2 изменял ширину в соответствии с шириной экрана.
То есть блок 1 статичен, а блок 2 должен занимать оставшуюся часть.

[Александр Вульф]

Роман Родионов: например, так codepen.io/anon/pen/vLNjer

[Роман Родионов]

В самом деле, как просто :)

[Александр Вульф]

Роман Родионов: там если у блоков разная ширина, то надо будет обернуть контейнер в clearfix

[Александр Вульф]

Роман Родионов: высота*

[Роман Родионов]

У меня все несколько сложнее. Дальше я разберусь! Спасибо!

Answer 2

[creatoroftheworld]

Тот пример, который вы привели в комментарии к ответу, можно решить на уровне CSS двумя способами.
1. Родитель со свойством "display: table" и потомки с "display: table-cell". Одному укажешь ширину - другой займет оставшееся место автоматом. (Родитель фиксированной ширины или width: 100%)
2. Потомкам "float: left". первому, например, "width: 100px", второму width: calc(100% - 100px);

Answer 3

[sanex3339]

Ну вот, я так и не смог решить на чистом CSS как мне заставить корректно работать position: fixed на ios (центрировать по середине экрана блок). Там он адово глючный, пришлось через position: absolute ставить по центру viewport и высчитывать на JS'е оффсет сверху и слева.