Растянуть содержимое 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% .
Пример
| Колонка 1 | Колонка 2 | Колонка 3 |
|---|---|---|
| Текст первой колонки | Текст второй колонки | Текст третьей колонки |
✖ ❤ Мне помогла статья нет оценок
17481 просмотр нет комментариев chepro 17 сентября 2013
Категории
Читайте также
- div height 100 (CSS)
- Ссылка без подчеркивания
- Размер шрифта (CSS)
- CSS хак (IE7)
- CSS хак (IE8)
- Запретить выделение текста (CSS)
- Курсор рука (CSS)
- Min-width для IE6
- CSS меню картинками
- Резиновая верстка div 3 колонки (HTML)
- Как подключить CSS только для IE 6
- Валидный HTML-тег HR
Комментарии
Написать комментарий
© Экспэнч 2010-2023
При полном или частичном копировании статей сайта указывайте пожалуйста ссылку на источник
Хотите узнать больше информации, пишите на: artem@expange.ru
Вход на сайт
Введите данные указанные при регистрации:
Социальные сети
Вы можете быстро войти через социальные сети: