Растяжение div по заполнению

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

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

3. В стилях для body, html пропишите:

   body, html {
   width: 100%;
   height: 100%;
   }

4. В стилях для div:

   .div {
   min-width: 100%;
   min-height: 100%;
   position: relative;
   }

5. В стилях для img:

   .div img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   }

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

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

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

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

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

Мне кажется с помощью jquery можно решить это вообще легко, к примеру так:

$(document).ready(function(){

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

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

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

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