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

#div #css

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



      



    

        Мы работаем.

        

        Правда-правда...   
    



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

Ответы

Ответ 1

Сделайте следующее:


Немедленно избавьтесь от тегов 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 - думаю,
что вот этот ресурс Вам подойдет.


Ответ 2

С развитием нашего любимого языка CSS, появились величины vw и vh
Эти величины определяют процент от размера окна, т.е. если вы блоку укажите 100vw,
то это будет означать, что блок должен быть на всю ширину окна. Так и с vh - по высоте



.object {
  width: 100vw;
  height: 100vh;
  background-color: red;
}





Стоит учитывать, что оно учитывает размер вместе со скроллом и по-этому следует делать
более точные расчёты :)


Ответ 3

Мне кажется с помощью jquery можно решить это вообще легко, к примеру так:
$(document).ready(function(){

var heightR = $(window).height();// высота экрана
var widthR = $(window).width();// ширина экрана

$('body .div').css({'width':widthR,'height':heightR}); 
});


Ответ 4

.container {
    width: 100%;
    max-width: 1260px;
    min-width: 780px;

    margin: 0 auto;
}
Примерно так.


Ответ 5

var heightR = $(window).height();// высота экрана
var widthR = $(window).width();// ширина экрана


Если страницы загружаются с помощью ajax и нужно обновление (как для чата, например),
то возникают проблемы на мобильных устройствах при растяжении или увеличении... Да
и вообще на resize экрана если что-то вешается, то проблемы неминуемы


Ответ 6

width:100%

Разве нет?