Коли ви центріруете веб-сторінку на CSS за допомогою margin: 0 auto. з'являється один дуже неприємний баг: сайт скаче при переході між короткою і довгою сторінками.
Це відбувається тому що на короткій сторінці вертикальний скроллбар прихований, а на довгій він з'являється.
Класичний фікс даної проблеми - завжди відображати вертикальну смугу прокрутки:
Але з приходом CSS3 підхід до вирішення даної проблеми змінився завдяки застосуванню calc () і нової одиниці вимірювання vm:
Підрахунок ширини скроллбар працює тільки за умови. що для тега встановлено значення overflow: auto.
Але тут є невелика проблема: якщо ви використовуєте адаптивний веб-дизайн. то зіткнетеся з тим, що margin-left більше ніж margin-right. коли сторінка зовсім маленька.
Пофиксить можна зовсім просто - використовувати даний підхід тільки на широких екранах (більше 960 пікселів), для чого можна задіяти медіа-вирази в CSS:
Даний підхід працює в IE9 +, Chrome і Firefox, але не працює в Opera і Safari 7.
2. Для вставки коду використовуйте спеціальні теги [code lang = "php"] ваш код [/ code]
А що з полношіріннимі блоками?
У мене з'являється біла смужка зліва.
Покажіть приклад на реальному сайті або codepen, наприклад
А можна пояснити навіщо ускладнювати собі життя, коли css-рішення з одного рядка справно працює?
Питання з розряду: "навіщо було винаходити колесо, адже є ж ноги"
Потрібно рухатися в ногу з прогресом, не спотикаючись про милиці минулого!
Це не відповідь, у колеса хоча б є переваги перед ногами, там процес заради результату.
У новому рішенні я ніяких переваг не бачу, тут процес заради процесу.
У кожного завдання є кілька шляхів вирішення. Наприклад, скруглить куточки можна картинками, дивами, svg, border-radius.
Так і тут. Це всього лише один шлях вирішення. Використовувати чи ні - стане зрозуміло з практики. Є ситуації, коли overflow: scroll; використовувати просто не виходить.
WordPress Digest
Дайджест новин зі світу WordPress