Как заверстать блок во всю ширину окна внутри блока с произвольной шириной
Пока переделывал блог, захотелось, чтобы посреди поста можно было ворваться с каким-нибудь блоком во всю ширину окна. Например, вот так:
Ширина основной колонки с контентом при этом абсолютно произвольная и может меняться в зависимости от размеров окна, настроения браузера и фазы луны. Единственное, что про нее достоверно известно — она выровнена по центру:
Самый очевидный способ — прервать блок с контентом, сделать блок без маржинов, затем продолжить контент:
Проблема в том, что посты удобно писать маркдауном, а в маркдауне от такого способа получается адская каша, за которой сложно следить:
div class="text-content">
# Пост!
Бла бла бла-бла бла. Бла бла? Бла бла-бла.
. бла блабла:
div>
div class="fullwidth">
div>
div class="text-content">
Бла блаааа бла бла-бла.
div>А хочется вот так:
# Пост!
Бла бла бла-бла бла. Бла бла? Бла бла-бла.
. бла блабла:
div class="fullwidth">
div>
Бла блаааа бла бла-бла. Окей, вставляем блок в контент и даем ему width: 100vw :
Теперь его надо сдвинуть к левому краю окна. Расстояние неизвестно, но у нас есть ширина блока с контентом ( 100% ) и ширина окна ( 100vw ). Сначала двигаем блок направо с помощью margin-left: 50% :
Теперь блок начинается ровно с середины окна. Отнимаем 50vw , чтобы блок уехал к левому краю. Получается margin-left: calc(50% — 50vw) , блок встает на нужное место:
Стиль блока выглядит так:
.fullwidth
width: 100vw;
margin-left: calc(50% - 50vw);
>Класс, то что надо.
. или нет? А это что за хрень?
Горизонтальный скролл, блин, откуда?
Оказывается, ширина вертикального скроллбара включается в ширину вьюпорта, то есть 100vw — это больше, чем нам нужно, и появляется горизонтальный скролл. Не представляю, зачем это сделано именно так, не могу придумать случая, когда это было бы полезным.
А счастье было так близко. Окей, время костылей. Гуглением находится один приемлемый костыль: засунуть в скрипт, который будет класть в css-переменную 1vw здорового человека (то есть без учета ширины скроллбара) и пересчитывать его при ресайзах:
script>
(function ()
function setVw()
const vw = document.documentElement.clientWidth / 100;
document.documentElement.style.setProperty('--vw', `$vw>px`);
>
setVw();
window.addEventListener('resize', setVw);
>()); script>Теперь у нас есть переменная var(—vw) , в которой лежит нужное нам количество пикселей. Но по старой традиции лучше использовать ее с фоллбеком на обычный 1vw , вот так: var(—vw, 1vw) .
В результате стиль блока превращается в.
.fullwidth
width: calc(100 * var(--vw, 1vw));
margin-left: calc(50% - 50 * var(--vw, 1vw));
>Препроцессоры немного сглаживают эту жесть. Я себе сделал переменную $vw: var(—vw, 1vw) , мой стиль теперь выглядит как-то так:
.fullwidth
width: calc(100 * $vw)
margin-left: calc(50% - (50 * $vw))P.S. Скроллбары на маке
Если вы верстаете на маке, рекомендую включить в настройках системы постоянное отображение скроллбаров: сразу будут видны косяки с горизонтальным (а иногда и с вертикальным) скроллом.
Подавляющее большинство ваших пользователей на винде, где скроллбары всегда видны. Будьте чуть ближе к ним.
как растянуть футер по ширине браузера?
Здравствуйте! есть макет на дивах, css .contener .header .leftbar .content .rightbar вот так для всех css а для футер я сделал вот так .footer ну вот, когда сужаю браузер футер сужается в месте с браузером, но хотел бы чтобы он был по ширине браузера! вот футер в браузере открытом виде а вот после того как сужаю браузер что-то туплю не могу решить вопрос, помогите плиз!
Анкета для новичков и профессионалов, вопросы могут быть разными!
На сайте с 23.06.2012
23 декабря 2013, 22:08
Задайте для футера:
min-width: 1200px;
margin: 0 auto;
ни к чему для блока на всю ширину браузера.
На сайте с 08.12.2011
23 декабря 2013, 22:16
Jor:
Задайте для футера:
ни к чему для блока на всю ширину браузера.
Футер на всю ширину браузера?
в общем суть вопроса такова есть макет (навалял для примера ), если взглянуть в код то можно увидеть что основная часть сайта header и midlle резиновая от 1600 до 1020px, а footer статичный и всегда на всю ширину, только при уменьшении окна меньше 1020px он вдруг начинает уменьшатся и выравниваться с левой стороны, и перестает быть на всю ширину.
Почему это так?
Везде ли это так?
Как с этим бороться?
- Вопрос задан более трёх лет назад
- 3448 просмотров
Комментировать
Решения вопроса 1
У Вас у класса wrapper min-width > max-width.
У футера зададите min-width равное min-width класса wrapper и после этой ширины он не будет уменьшаться.
Как растянуть Footer по ширине сайта?
Создайте аккаунт или войдите в него для комментирования
Вы должны быть пользователем, чтобы оставить комментарий
Создать аккаунт
Зарегистрируйтесь для получения аккаунта. Это просто!
Войти
Уже зарегистрированы? Войдите здесь.
Больше способов поделиться.
Похожие публикации
Редактирование данных в footer.. [РЕШЕНО]
Автор: Master13, 16 мая 2013
[Поддержка] footer cache
Автор: kJlukOo, 25 июля
footer cache
Автор: kJlukOo, 25 июля
Сайт на всю ширину экрана
- шаблон на всю ширину
- на ширину окна
новый сайт и ошибки
Автор: artkowi, 19 августа
Сейчас на странице 0 пользователей
- Нет пользователей, просматривающих эту страницу.
Покупцям
- Оплата розширень фізичними особами
- Оплата розширень юридичними особами
- Політика повернень
Розробникам
- Регламент розміщення розширень
- Регламент продажу та підтримки розширень
- Віртуальний обліковий запис автора
- Політика просування оголошень
- API каталогу розширень
- Вирішення спорів щодо авторських прав
Корисна інформація
- Публічна оферта
- Політика повернень
- Політика конфіденційності
- Платіжна політика
- Політика передачі особистих даних
- Політика прозорості
Останні розширення
Движок интернет магазина OpenCart (ocStore) — официальный сайт OpenCartForum.com Powered by Invision Community
- Уже зарегистрированы? Войти
- Регистрация
Раздел покупок
ocStore
- Назад
- Официальный сайт
- Демо ocStore 3.0.3.2
- Демо ocStore 2.3.0.2.4
- Скачать ocStore
- Документация
- История версий ocStore
Шаблоны
OpenCart.Pro
- Создать.
Важная информация
На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.