Как растянуть body и html на всю высоту браузера?
А вот если Вы об этом, что вн. контент больше высоты экрана (высоты body, html ):
* < box-sizing: border-box; >html, body < width: 100%; height:100%; background: #ccc; padding: 0; margin: 0; border: 2px solid #000; >.container
Тогда либо убрать для body, html высоту в 100%, либо задавать минимальную высоту ( min-height: 100vh или min-height: 600px ).
* < box-sizing: border-box; >html, body < width: 100%; background: #ccc; padding: 0; margin: 0; border: 2px solid #000; >.container
Отслеживать
ответ дан 14 окт 2018 в 9:40
22.4k 10 10 золотых знаков 56 56 серебряных знаков 120 120 бронзовых знаков
Может проблема именно с последней секцией? Потому что до последней секции все тянется хорошо.
14 окт 2018 в 10:47
Мне кажется именно последняя секция не растягивается. Именно элементы выпадают с последней секции.
14 окт 2018 в 10:48
Может быть есть возможность весь код сюда выложить? Подозреваю что еще есть элементы с float в данном случае стоит применить для всей обертки ( body’) overflow:hidden` или clearfix применять. Бывает теряется закрывающий тег и все тоже ломается. Ситуации разные бывают как и баги)
14 окт 2018 в 11:10
float у меня нет, я использую флексбокс, мне кажется это проблема именно с position, потому что когда я position убрал, все стало на свои места, но мне нужен все равно position, чтобы с позиционировать элемент по отношению к блоку, но только чтоб элементы не выпадали из своего потока
14 окт 2018 в 11:14
Спасибо большое за помощь, я наконец-то решил эту проблему, я убрал отрицательный марджин, и добавил элементу position: relative с отрицательным значением, и все стало как надо, это походу глюк из-за отрицательного марджина был
Как растянуть картинку на весь экран css?
Чтобы растянуть картинку на весь экран с помощью CSS, вы можете использовать следующий код:
img width: 100%; height: 100%; > Этот код устанавливает ширину и высоту картинки равными 100%, что означает, что она будет занимать всю доступную ширину и высоту родительского элемента.
Обратите внимание, что этот код работает только если родительский элемент имеет определенную ширину и высоту. Если это не так, то вы можете использовать следующий код:
html, body width: 100%; height: 100%; margin: 0; padding: 0; > img width: 100%; height: 100%; > Этот код устанавливает ширину и высоту html и body равными 100%, а также убирает верхний и левый отступы (margin), чтобы картинка занимала все доступное пространство.
В этом случае картинка будет растягиваться или уменьшаться в размерах, чтобы соответствовать размерам родительского элемента. Если же вы хотите, чтобы картинка оставалась пропорциональной, но занимала все доступное пространство, можно сделать так:
html, body width: 100%; height: 100%; margin: 0; padding: 0; > img width: 100%; height: auto; object-fit: cover; > Этот код устанавливает атрибут object-fit равным cover , что означает, что картинка будет обрезана, чтобы полностью заполнить доступное пространство, но при этом оставаться пропорциональной.
Нужно понимать, что этот код работает только в современных браузерах, поддерживающих атрибут object-fit . Если вы хотите, чтобы ваш код работал во всех браузерах, вы можете использовать JavaScript для реализации такого поведения.
10 октября 2022
Лучший способ растянуть изображение — это использовать свойство CSS3 background . Вот пример, который использует фоновое изображение для body страницы, рисунок всегда растянется и заполнит весь экран.
body /* задаёт путь до файла */ background-image: url("path_to_my_image.jpg"); /* задает стартовое положение изображения на странице */ background-position: center center; /* определяет размер изображения на странице */ background-size: cover; /* свойство устанавливает, будет ли повторяться изображение и каким образом */ background-repeat: no-repeat; /* cвойство определяет, будет ли фоновое изображение прокручиваться вместе с остальной частью страницы или будет фиксированным */ background-attachment: fixed; /* возможна также и короткая запись данных свойств */ // background: url("path_to_my_image.jpg") center center no-repeat fixed; // background-size: cover; > Блок на весь экран | CSS
If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the percentage value is treated as ‘0’ (for ‘min-height’) or ‘none’ (for ‘max-height’). [w3.org]
html, body < height: 100%; margin: 0; padding: 0; overflow: hidden; >body < overflow: auto; /* добавить полосу прокрутки */ > main
Блок шириной на весь экран монитора выровнять по центру окна браузера
У многих сайтов, в том числе у «Шпаргалки блоггера» содержание ограничено определённой шириной и горизонтально выравнивается по середине экрана.
header, nav, main, footer
Для того, чтобы контент выходил за пределы этих 1200px , но был ограничен шириной окна браузера, достаточно такого кода:
Картинка на весь экран CSS
Особенно здорово смотрятся изображения. Они занимают необходимое им пространство, но не более ширины окна браузера.
Код немного доработан, опираясь на статью «Размер изображения меняется при изменении экрана браузера». Там же написан соответствующий вариант для видео.
7 комментариев:
Agent_Smith Полезная штука, спасибо Вам) NMitra Для себя делала :)) Другие прописывают max-width для каждого отдельного тега (p, pre и т.п.), а не для всей колонки main. Анонимный С высотой блока не работает. просто по ширине экрана, ниже обрезается и никуда не скролится NMitra Ничего не поняла 🙂 Приведите пример, пожалуйста. Анонимный о Иван Сафронов не работает данный метод NMitra Так не может быть: на данной странице ведь работает. Покажите URL, где внедрён код и поясните что именно хотите сделать. Например, блок с заголовком «Популярное».
Помогите сделать body на весь экран
Ребят делаю сайт, попросил друг, 3 года как не занимался этим, забросил, и очень многое забыл, сложно делать по старой памяти, но приходиться. Я делаю сайт на подобии того что делал раньше, но у меня видимо очень много ошибок, одна из их не могу понять почему body только закрывает часть сайта, а не на весь, уже больше 2 часов промучился переискал кучу инфы в интернете ничего не помогает, если вы не поможете прийдёться забросить это дело.
я всё проверял все галочки всё закрыто, не должно быть ошибок, но боди хоть убей закрывает часть только сайта из за этого едит весь блок
Ссылка на комментарий
Поделиться на других сайтах
Больше способов поделиться.
3 ответа на этот вопрос
- Сортировать по голосам
- Сортировать по дате
Рекомендованные сообщения
Присоединяйтесь к обсуждению
Вы можете опубликовать сообщение сейчас, а зарегистрироваться позже. Если у вас есть аккаунт, войдите в него для написания от своего имени.
Примечание: вашему сообщению потребуется утверждение модератора, прежде чем оно станет доступным.
Больше способов поделиться.
Похожие публикации
Добрый день! помогите пожалуйста со скриптом таймера(счетчика) тип времени работы компании. Требуют, чтобы было с годом, месяцем, днем, часами и т.д. Прошарил все сайты, не могу найти — сделать, чтобы он он шел вперед. ПРИМЕР: «мы на рынке уже: 7 лет, 2 месяца, 3 дня, 4 часа, 2 минуты, 33 секунды»
Напишите код, если не тяжело. Спасибо.
Для блока пытаюсь установить фон, при увеличении фон обрезается браузером до размера окна, но контент за его пределами имеется и остается без фона. что я делаю не так?
Добрых суток Товарищи. Помогите. Есть макет сайта. Пробую сверстать нижнею часть это все ниже начиная от белого фона. Проблема в том что я открывая сайт в интернете(chrome) вижу то, что я свесртал не влезает и скролится влево. Как это исправить. Пробовал max-widht вроде не помогает. Может не правильно применяю.
Здравствуйте прошу помочь реализовать нормальный слайдер, в данный момент все в принципи работает как и было задумано, но все картинки привязаны позиционно и накладываются друг на друга из-за чего при уменьшении размера все сбивается
Личные качества
Ответственность
Креативность
Гибкость мышления
Внимание к деталям
Быстрая обучаемость
Нужна помощь с горизонтальным меню для сайта.
Мне нужно чтобы в меню все кнопки были сверху вместе с логотипом и в нем не оставалось пустого места, и что-бы было у всех одинаковое и не съезжало вниз от того что у человека маленький монитор.
Помогите решить данную проблему вот ссылка на меню: http://jsfiddle.net/u0tafr7v/ буду очень благодарен если поможете
Вот на фото пример как нужно что-бы было на сайте при любых расширениях экрана у пользователя.
А это что происходит при уменьшение браузера или с маленького монитора: