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

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

<!DOCTYPE html>
<html>
<head>
<meta charset = ‘utf-8’ />
<style>
html,body,.div {height:100%;margin:0}
.div {background-color:#000;color:#fff;height:100%}
</style>
</head>
<body>
<div class = ‘div’ width=»100%»>
<font size = ‘+5’>Мы работаем.</font><br />
<image src = ‘https://…’ /><br />
<font size = ‘+5’>Правда-правда…</font>
</div>
</body>
</html>

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

Подскажите, что сделать?

задан 27 янв ’13 в 9:41

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

  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 — думаю, что вот этот ресурс Вам подойдет.

ответ дан 27 янв ’13 в 10:59

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

.object {
width: 100vw;
height: 100vh;
background-color: red;
}
<div class=»object»></div>

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

ответ дан 11 фев ’17 в 17:14

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

$(document).ready(function(){

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

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

ответ дан 27 янв ’13 в 10:28

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

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

ответ дан 27 янв ’13 в 10:16

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

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

VenZell

18.9k55 золотых знаков3737 серебряных знаков5959 бронзовых знаков

ответ дан 19 янв ’15 в 8:29

ответ дан 27 янв ’13 в 9:46

Всё ещё ищете ответ? Посмотрите другие вопросы с метками div css или задайте свой вопрос.