VPF::Растянуть div на оставшуюся высоту

svch

Дата 17.3.2015, 13:48 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 116
Регистрация: 10.4.2006

Репутация: нет
Всего: нет

Код


* {
    margin: 0px;
    padding: 0px;
}
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
div {
    display: block;
    position: relative;
}
#header {
    background: #CC66CC;
    height: 100px;
}
#content {
    background: #33CC00;
    width: 100%;
    overflow-y: scroll;
    position: absolute;
    top: 100px;
    bottom: 0px;
}

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>
</head>

<body>
    <div id="header">хедер контент</div>
    <div id="content">контент страницы</div>
</body>

</html>

Добрый день всем !
Не смог найти кросс-браузерного решения, думаю - может здесь помогут ?
- есть страница на все окно без скроллов.
- есть шапка
- есть контект под шапкой

Задача: растянуть див с контентом по всей оставшейся высоте страницы.
У меня получается, только если шапка имеет фикс по высоте. Иначе никак.

Есть еще такой вариант (без фикса хедера по высоте):

Код


* {
    margin: 0px;
    padding: 0px;
}
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body {
    display: -webkit-box;
    display: -moz-box;
    display: box;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    box-orient: vertical;
}
div {
    display: block;
    position: relative;
}
#header {
    background: #CC66CC;
}
#content {
    background: #33CC00;
    width: 100%;
    overflow-y: scroll;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    box-flex: 1;
    height: 100%;
}

Но у меня в IE высота content-а остается на всю страницу, просто сам див уползает вниз за границу страницы.
Подскажите, может у кого есть решение без js ?

Большое спасибо.
С уважением, Сергей.

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »