Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Растянуть 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 ?

Большое спасибо.
С уважением, Сергей.
PM MAIL   Вверх
  
Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »


 




[ Время генерации скрипта: 0.0929 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.