CSS как настроить адаптивный дизайн по вертикали?
Я новичок и только учусь и стараюсь разобраться в основах, гугл уже перекопал - не посылайте туда, не пойду... бутстрап пока не советуйте - еще не дошел, хочу понять базовые принципы прежде чем пользоваться готовыми библиотеками.
Допустим есть макет-лендинг. С шириной более-менее понятно на разных разрешениях что делать - тут можно отталкиваться от ширины экрана, а как быть с высотой?
Допустим макет состоит по вертикали из 7 крупных блоков. У главной обертки я задал фиксированную высоту, допустим body.wrap_page {height: 3660px}, далее я разбил в процентном соотношении остальные блоки от 100% (ну и далее вложенные по иерархии соответственно от них тоже). Все получилось....сначала. Потом я начал менять разрешения экрана и писать медиа-запросы, в этот момент возникла необходимость менять пропорции между блоками - какой-то из них оставить пока как есть, какой-то сделать шире, какой-то наоборот сузить. Вот тут пошла нескладуха - сужая хотя бы один блок внизу страницы получается белое поле, меняешь изначальную высоту - пропорции то остаются теми же и чтобы получить желаемое необходимо пересчитывать каждую желаемую пропорцию от новой высоты. поставить корневой height в авто - вся разметка рушится ибо вложенным процентам нет от чего отталкиваться, сделать корневой height в % - опять же не работает, т.к. теперь ему нет от чего считать себя.
Интуитивно чувствую что должен быть другой - более простой путь, чем пересчитывать и переписывать всю вертикаль цсс под каждое разрешение, но решение не нахожу..... подскажете, что делают матерые верстальщики в таком случае?
Дмитрий: Размер блока зависит от контента в нем. Его не нужно ограничивать. Разумеется без фанатизма. Иконкам нужен размер, каким-то плиткам например, или еще что-то. Но в основном, повторюсь, высота блока зависит от содержимого. Вертикаль всегда резиновая.
Сергей: а если нужно например разместить,к примеру, большую красивую форму отправки емейла с кнопкой, которая при всей красоте занимает около 20% площади отведенного блока (из расчета чтобы посреди экрана была одна форма на бэкграунде и все), то ее размер как - маргинами-паддингами толкать?
Дмитрий: Здесь в общем-то нет контента. поле и кнопка. я бы задал внутренние отступы, чтобы содержимое не липло к краям, и мин-хейт, чтобы заполнить экран, как дизайнер нарисовал. Центрирование любым удобным способом.
мин-хейт задал бы не сразу, а в медиа-запросе (используя мобайл-фёст, и соответственно свойства мин-*) @media ( ... condition ...) { min-height: ...}
Почему именно мин-хейт. Потому что есть ненулевая вероятность появления в будущем других форм, с большим количество полей. Для них хорошо бы использовать ту же разметку по возможности (DRY). Мин-хейт не будет ограничивать такие формы в высоту, а паддинги не дадут им слипнуться.
Сергей: Присоединяюсь к вопросу! Тоже ничего не могу найти по этой теме. Бывают ситуации, когда необходимо задать высоту и чтобы она была адаптивной. Например, вертикальное меню, которое на любых экранах должно занимать в высоту 100%. Кнопка >< (закрыть), логотип и только потом навигация по ссылкам. А внизу еще социальные кнопки, прижатые к низу, как футер. И как тут все это правильно выстроить, угадать с размером строк и т.д.?
Сергей: Да, наверное, это лучше всего. Хотя браузер забирает часть экрана для управления вкладками, и как высчитывать основную область просмотра, я пока не понимаю.
Тут дело в том, что задавать высоту body - зло. Высота, наоборот, задаётся скорее мелким элементам страницы. То есть есть у вас например:
body
section
img
/section
section
div
button
/div
/section
/body
Вот здесь уместно было бы задать высоту для img и если очень хочется - для button . Всё остальное регулируется через padding, margin, flex, .... но не через жёсткие размеры.
В таком случае вы просто в медиа-запросах уменьшаете высоту элементам, а всё остальное само подстраивается
