Блок на весь экран | 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, где внедрён код и поясните что именно хотите сделать. Например, блок с заголовком «Популярное».
Как растянуть картинку на весь экран 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 прилагаю.
body, html < height:100%; min-height:100%; >.wrapper < display: flex; flex-direction: column; >.content-wrapper < display: flex; flex-wrap: nowrap; >.head < background-color: #D2691E; text-align: center; margin: 3px; >.navigation < align-self: flex-start; margin: 3px; background-color: lightgreen; width: 200px; text-align: center; height: 500px; >.content < background-color: #9df5d7; margin: 3px; >.info < background-color: lightBlue; margin: 3px; >.footer
Выглядит все это дело так:
Всем заранее большое спасибо :з
- Вопрос задан более трёх лет назад
- 4662 просмотра
3 комментария
Простой 3 комментария
Как растянуть страницу на весь экран?
Здравствуйте! У меня есть сайт. И у меня проблема: не знаю, как растянуть страницу до конца экрана. Рамка страницы как бы обтекает текст и заканчивается, где заканчивается текст. А я хочу, чтобы футер был в самом низу и, где нет текста, пусть будет пустое пространство. Это мой style.css. Ниже есть и другие строки, но они относятся к описанию свойств, стилей кнопок, списков и др. мелочей.
* < margin: 0px; padding: 0px; >html < height: 100%; >body < background-attachment: fixed; background-image: url("images/bg.jpg"); background-position: top left; background-repeat: repeat; height: 100%; margin: 0px auto; padding: 0px; width: 100%; >.bg-glad < background-attachment: fixed; background-image: url("images/page_gl.png"); background-position: top left; background-repeat: no-repeat; bottom: 0px; left: 0px; position: relative; right: 0px; top: 0px; >#wrapper (основной контейнер в котором находится все за исключение футера) < background-color: #c9f8f8; border-radius: 30px; height: auto !important; margin: 0px auto; min-height: 100%; width: 992px; >/* Header; -----------------------------------------------------------------------------*/ #header < height: 175px; >.header-img < background-image: url("images/header.jpg"); background-position: center center; background-repeat: no-repeat; border-radius: 20px 20px 0px 0px; height: 175px; position: absolute; top: 0px; width: 992px; >#zag < color: #f6fe1c; font-family: Palatino Linotype, Geneva, Helvetica, sans-serif; font-size: 20px; margin: 60px 0px 0px 15px; position: absolute; >#zag a < color: #f6fe1c; font-family: Palatino Linotype, Geneva, Helvetica, sans-serif; font-size: 30px; text-decoration: none; >#zag a:hover < color: #fcffbd; text-decoration: underline; >/* begin Flash */ #art-flash-area < border-radius: 20px; height: 175px; left: 0px; overflow: hidden; position: absolute; top: 0px; width: 992px; >#art-flash-container < height: 248px; left: 0px; position: absolute; top: -36px; width: 992px; >#art-flash-container div.art-flash-alt < height: 30px; margin: 0px auto; position: relative; top: 36px; width: 110px; >/* Header END; -----------------------------------------------------------------------------*/ /* Middle; #middle (контейнер идущий сразу за хедером внутри wraper после хедера занимает все оставшееся пространство) < height: 1%; padding: 0 0 100px; position: relative; width: 100%; >; #middle:after < clear: both; content: '.'; display: block; height: 0; visibility: hidden; >; #container (находится в нутри middle соседствует с left sidbar) < float: right; width: 100%; z-index: 3; >; #content (контейнер внутри container содержащий контент) < background-color: #b1f6b9; display: block; margin: 5px 5px -5px 225px; overflow: auto; position: relative; top: 40px; >; /* menu (синее меню под хедером); -----------------------------------------------------------------------------*/ .menu < background: url("images/nav.png") repeat-x; display: block; overflow: hidden; position: absolute; width: 992px; z-index: 5; >.menu ul < display: block; list-style: none; >.menu ul li < display: block; float: left; margin: 0px 10px; padding: 10px 15px; >.menu ul li a < color: #fff; font: 16px "Palatino Linotype" Verdana, sans-serif; text-decoration: none; >.menu ul li:hover < background: url("images/nav_hover.png") repeat-x; display: block; >.menu ul li a:hover < color: #fff; display: block; font: 16px "Palatino Linotype" Verdana, sans-serif; text-decoration: underline; z-index: 5; >/* Vipadayuchie menu; -----------------------------------------------------------------------------*/ #biz_menu < background: #0204a2; display: none; float: left; margin-left: 105px; position: absolute; top: 35px; z-index: 3; >#biz_menu div < display: block; padding: 2px 20px 2px 10px; >#biz_menu div:hover < background: #3983f9; >#biz_menu a < color: #fff; font: 16px "Palatino Linotype"; text-decoration: none; >#biz_menu a:hover < color: #fff; font: 16px "Palatino Linotype"; text-decoration: underline; >#plati_menu < background: #0204a2; display: none; float: left; margin-left: 310px; position: absolute; top: 35px; z-index: 3; >#plati_menu div < display: block; padding: 2px 30px 2px 10px; >#plati_menu div:hover < background: #3983f9; >#plati_menu a < color: #fff; font: 16px "Palatino Linotype"; text-decoration: none; >#plati_menu a:hover < color: #fff; font: 16px "Palatino Linotype"; text-decoration: underline; >#bg < background-image: url("images/vmenu1.png"); background-position: right; background-repeat: no-repeat; >#bg:hover < background-image: url("images/vmenu.png"); background-position: right; background-repeat: no-repeat; >#privat_menu < background: #0204a2; display: none; float: left; margin-left: 450px; position: absolute; top: 35px; z-index: 3; >#privat_menu span div < display: block; padding: 2px 20px 2px 10px; >#privat_menu span div:hover < background: #3983f9; >#privat_menu a < color: #fff; font: 16px "Palatino Linotype"; text-decoration: none; >#privat_menu a:hover < color: #fff; font: 16px "Palatino Linotype"; text-decoration: underline; >#poker_menu < background: #0204a2; display: none; float: left; margin-left: 282px; margin-top: 130px; position: absolute; top: 35px; z-index: 3; >#poker_menu span div < display: block; padding: 2px 20px 2px 10px; >#poker_menu span div:hover < background: #3983f9; >#poker_menu a < color: #fff; font: 16px "Palatino Linotype"; text-decoration: none; >#poker_menu a:hover < color: #fff; font: 16px "Palatino Linotype"; text-decoration: underline; >/* Sidebar Left (левый сайд бар находится в нутри middle); -----------------------------------------------------------------------------*/ #sideLeft < background: #b1f6b9; display: block; float: right; height: 100%; margin-right: -220px; position: relative; top: 44px; width: 215px; z-index: 1; >#calend < display: block; margin: 15px; >.zagolovok < background-image: url("images/vmenu_sb.png"); background-repeat: no-repeat; color: white; font-size: 22px; font: Georgia, Geneva, sans-serif; height: 30px; padding: 2px 0px; text-align: center; >/* Footer; -----------------------------------------------------------------------------*/ #footer