Кросбраузерный адаптивный шаблон, кто какой вариант использует?

Question

[Антон Вебсайтовский]

Здорова всем, с наступающим.

Давно использую такой метод, но он старый, кто более современный использует и удобный, подскажите и покажите, хочу что-то современное использовать, на флексах допустим.

Адаптивный вариант, где низ сайта прижат к низу сайта.

Мой вариант: метод топорный, где надо отступы прописывать допустим нижнего контейнера, чтобы он на контекст не налезал если контента много, ну и верх тож самое.
https://jsfiddle.net/t0xn63wz/

Answer 1

[profesor08]

Используй flex.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
  background: red;
}

footer {
  flex: 0 0 auto;
  background: blue;
  height: 200px;
}

Comments

[Антон Вебсайтовский]

так этот вариант, он поделен на низ и центр я так понял, а верх? любым может быть, правильно я понял.

[profesor08]

Антон Вебсайтовский, ну добавь хедер и продублируй стили, высоту указывать не обязательно чтоб растягивалось насколько надо контенту.

[Антон Вебсайтовский]

profesor08, сделал пример, центр по центру разместил по вертикали и горизонтали.

Проблема с адаптацией по горизонтали, почему не сжимается, а скрол появляется.
https://jsfiddle.net/9hofx4nm/1/

[Антон Вебсайтовский]

И почему padding: 0 50px 0 50px; не срабатывает, отсупы, у меня менюха наезжает и уходит за край.

Я обычно ставлю боков отступы, чтоб сайт нормально смотрелся, когда экран маленький и если все блоки и текст прижат и нет отступов то не красиво, но с этим вариантом чет не срабатывают нормально отступы.

[Антон Вебсайтовский]

Вот такая херня выходит:

[profesor08]

Антон Вебсайтовский, предлагаешь за тебя работу делать?

[Антон Вебсайтовский]

profesor08, нет, спрашиваю как быть с отступами.

Answer 2

[xmoonlight]

https://css-tricks.com/couple-takes-sticky-footer/

Comments

[Антон Вебсайтовский]

можно сказать все методы там есть )

[xmoonlight]

Антон Вебсайтовский, Так и есть. Я ж старался, когда искал)

[xmoonlight]

Антон Вебсайтовский, можно даже выбрать решением, когда надоест мучиться с другим вариантом...

Answer 3

[Lord_Dantes]

современное

grid

Читал эту статью дошло)
grid

Comments

[VegasChickiChicki]

А потом заказчик пришел и спросил, а почему в IE не работает? Не порядок, нужно что бы работало и в IE...

[Антон Вебсайтовский]

VegasChickiChicki, ахаха ) это да, может быть ))

[Антон Вебсайтовский]

Надо чтобы метод поддерживался большинство браузерами.

[Lord_Dantes]

Антон Вебсайтовский, можно футер вообще двинуть за экран или сделать body 90vh

Answer 4

[Тарас Шульга]

Может что-то не так понял, но вроде все довольно просто https://codepen.io/angryyum/pen/bGNqEbV

Comments

[Антон Вебсайтовский]

о хороший вариант, для главной страницы, где контент по середине, слева логотип наверху, справа разделы, а в самом низе контакты.

по типу такого варианта.

[Тарас Шульга]

Ну довольное простоя задача. Мой вам совет подучите немного флексы - ибо это база)

[Антон Вебсайтовский]

Тарас Шульга, знаю что простая, нет низ чет не прижат к низу ! поставил себе и чет уходит низ, делает скрол.

[Антон Вебсайтовский]

А во все сделалось. без скрола.

[Тарас Шульга]

Антон Вебсайтовский, дописал 3 строчки которые это пофиксят.

[Антон Вебсайтовский]

Все же есть проблема с этим методом, сначала тупил думал где адаптация.
вот рабочий пример: https://jsfiddle.net/5pdt2q6L/2/

header - не во всю длину max-width: 1200px;
видно что все сжалось, контент.

и я обычно делал так: и все работало, теперь добавлять надо max-
width: 1200px;
min-width: 270px;

если убрать:
в .w{} то все ок.

display: -webkit-box;
  display: -ms-flexbox;
  display: flex;