Страницы

Поиск по вопросам

среда, 17 октября 2018 г.

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

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

Мы работаем.

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


Ответ

Сделайте следующее:
Немедленно избавьтесь от тегов font, вместо них используйте span, p, div и т.д. Стили пишите в отдельном CSS файле, или, на худой конец, в head В стилях для body, html пропишите:
body, html { width: 100%; height: 100%; } В стилях для div
.div { min-width: 100%; min-height: 100%; position: relative; } В стилях для img:
.div img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
Хотя, на мой взгляд, картинку лучше задать background'ом для .div и прописать для него background-size: cover;
Надписи так же позиционируются абсолютно.

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

Комментариев нет:

Отправить комментарий