Как растянуть блок на весь экран css

Растянуть содержимое div по всей странице

Здравствуйте, уважаемые, появилась следующая задача: растянуть содержимое div блока на всю высоту экрана, иными словами — Если у пользователя широкий экран, то всё содержимое блока < div >растягивается по всей ширине его экрана. Если у пользователя узкий экран, то всё содержимое блока < div >сжимается, так, чтобы не вылезать за пределы экрана.

     html,body,.div .div  Мы работаем. 
 
Правда-правда.

Приведенный мною код, к сожалению, работает неверно. Изображение выходит за рамки экрана при этом ещё и перекрывая собою нижний текст. Подскажите, что сделать?

Отслеживать
задан 27 янв 2013 в 9:41
Павел Сотников Павел Сотников
371 1 1 золотой знак 4 4 серебряных знака 16 16 бронзовых знаков

6 ответов 6

Сортировка: Сброс на вариант по умолчанию

Немедленно избавьтесь от тегов font , вместо них используйте span , p , div и т.д.
Стили пишите в отдельном CSS файле, или, на худой конец, в head .
В стилях для body , html пропишите:

body, html

.div img

Хотя, на мой взгляд, картинку лучше задать background ‘ом для .div и прописать для него background-size: cover;

Надписи так же позиционируются абсолютно.

P.S. А вообще, почитайте лучше по адаптивной верстке, например здесь. А также, и это главное, очень внимательно читайте и я бы даже сказал учите html & css — думаю, что вот этот ресурс Вам подойдет.

Высота блока на весь экран?

Здравствуйте.
Задача такова. Максимальная высота экрана 100%. т.е. полоса прокрутки не должна появляться ни в коем случае. Есть хедер и футер с фиксированной высотой. Расположены они соответственно наверху и внизу экрана. Нужно добавить блок между ними чтобы его высота полностью занимала свободное место между хедером и футером, независимо от контента. Все это нужно сделать без использования js.

Вопрос задан более трёх лет назад
4399 просмотров

1 комментарий

Простой 1 комментарий

Как сделать DIV на весь экран, перекрывающий всю страницу, с помощью CSS

К поиску ответа на вопрос «Как сделать DIV на весь экран, перекрывающий всю страницу, с помощью CSS» обычно обращаются в двух случаях. Во-первых, чтобы соблюсти требование закона и скрыть контент от пользователей не доросших для его просмотра. Во-вторых для того, чтобы оградить контент своего сайта от копирования. В данной статье рассмотрим то, как создать такой div , который перекрывает всю страницу и которым можно спрятать весь контент, а можно просто его уберечь от простого копирования. Но всё это конечно легко обходится, поэтому для себя я озадачился этим вопросом только для того, чтобы соблюсти закон на части своих страниц одного проекта (где про алкоголь и сигареты — иначе Google AdSense ругается).

Рабочий пример css-кода с блокирующим весь экран div (на всю ширину и всю высоту экрана)

Сразу приведу готовый код страницы с блокирующим весь экран div , который занимает всю ширину и всю высоту экрана (при условии, что у тега не переопределены высота и ширина, так как div наследует высоту и ширину от body , в котором он располагается):

   Пример DIV, перекрывающего весь экран .content-blocker тут контент страницы

Где разместить и как обозначить div , блокирующий всю ширину и высоту экрана

Сам div можно вставить в любое место в коде страницы только так, чтобы он был вложен только в . Это может потребоваться для того, чтобы запутать пользователя, желающего обойти этот div и всё-таки добраться до контента страницы, но это будет наверняка тщетно — все современные браузеры идут в комплекте с инструментами разработчика и всё это быстро находится и обходится. Поэтому проще вставить этот div перед закрывающим тегом или сразу после — там ему самое место.

Для того, чтобы было проще управлять стилями этого div , зададим ему класс content-blocker (см. стр.19):

Можно наполнить его содержимым, но это уже в зависимости от поставленной задачи.

CSS-стили div’а, расположенного на всю ширину и высоту экрана

Ну и собственно нужно прописать стили, которые растянут этот div на 100% ширины и 100% высоты экрана, поместят его поверх всех элементов страницы и не дадут ему сдвинутся с места. Стили нужно задать в контейнере head:

 .content-blocker

Итак свойства по порядку и то, что они делают:

Свойство position: fixed; — нужно для того, чтобы даже при скроллинге длинных страниц наш div жёстко занимал свою позицию и перекрывал весь контент.
Свойства top: 0; и left: 0; — задают координаты начала div, даже если у тега они были перееопределены, а такое случается достаточно часто.
Свойства width: 100%; и height: 100%; — наследуют 100% ширины и 100% высоты контейнера . Можно конечно задать в абсолютных значениях километровые размеры, но зачем, если весь контент на правильно свёрстанных сайтах выводится в те размеры, которые занимает , а то, что не попадает в эти размеры, обычно находится вне зоны видимости и не видно пользователю?
Свойство background-color: rgba(136, 136, 204, 0.5); — требуется задать, если нужно перекрыть пользователю просмотр (тогда прозрачность должна быть либо вообще не задана, либо равняться 1 ). Если это свойство не задать, div будет прозрачным: всё будет видно, но скопировать что-либо со страницы будет невозможно без вмешательства с помощью инструментов разработчика браузера (которые включаются в два клика, и одной кнопкой удаляют этот div — это к тому, что так защищают контент только от совсем ничего не умеющих и ничего не знающих пользователей, которые вряд ли что-то будут копировать и тиражировать с сайта).
Свойство z-index: 4444; — это для того, чтобы поднять div над всеми слоями. Если что-то будет всё-равно торчать, просто нужно посмотреть z-index торчащего элемента и выставить ещё больший z-index для нашего div .

Выводы:

Так можно просто и быстро создать перекрывающий всю страницу div , который надёжно спрячет контент во исполнение законов, но вряд ли защитит от тех, кто ворует контент. Всё, что опубликовано в интернете и отображается в браузере, можно с теми или иными усилиями утащить, уж поверьте. И чем сложнее навороты, тем сложнее обслуживать сайт, так что борьба с воровством контента в плане его защиты от копирования, — заранее проигрышная тема.

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! 😉

Растянуть таблицу на всю ширину без отступов (CSS)

Чтобы растянуть таблицу на всю ширину браузера и по краям не было отступов, сперва необходимо обнулить внешние и внутренние отступы тегов и , затем установить значение width: 100% .

Пример

Растянуть таблицу на всю ширину без отступов (CSS) /** * Чтобы не было отступов, необходимо обнулить отступы * у тегов body и html */ html, body < margin: 0; padding: 0; >/** * Ставим ширину 100% */ table < width: 100%; border-collapse: collapse; >th, td

Колонка 1	Колонка 2	Колонка 3
Текст первой колонки	Текст второй колонки	Текст третьей колонки

✖ ❤ Мне помогла статья нет оценок
17481 просмотр нет комментариев chepro 17 сентября 2013

Написать комментарий
© Экспэнч 2010-2023
При полном или частичном копировании статей сайта указывайте пожалуйста ссылку на источник
Хотите узнать больше информации, пишите на: artem@expange.ru

Вход на сайт

Введите данные указанные при регистрации:

Социальные сети

Вы можете быстро войти через социальные сети: