Див в 100% высоты

@borovik · Регистрация: 25.07.2010

Студворк — интернет-сервис помощи студентам

привет вот тут пример в пару строк, не могу сделать чтобы левый див был 100% высоты.
Помогите

http://jsfiddle.net/3Uk6S/

Добавлено через 5 минут
При таком раскладе:
Левая панель уходит вниз ("появляется полоса прокрутки") как раз на высоту title

HTML5
1
2
3
4
5
<div id="main">
    <div id="title">Это заголовок</div>
    <div id="left">этот 100% высота</div>
    <div id="cont">это контент</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body,html{
    margin: 0;
    padding 0;
    height: 100%;
    background-color: lavenderblush;
}
#main{
    background-color: green;
    height: 100%;
}
#title{
     background-color: aqua;
}
#left{
    float: left;
    width: 60px;
    height: 100%;
    background-color: grey;
}
#cont{
    margin-left: 75px;
    background-color: red;
}

http://jsfiddle.net/3Uk6S/1/

@EaGames · 18.03.2014, 20:20

height: 100% равен высоте родительского элемента. Это не магическое «высота всего окна».

так как родителем для #left является #main который уже занимает всю высоту окна, к примеру она ровна 1000px. То #left унаследовал именно это значение (1000px).
Таким образом максимальное углубление для уснаследовании высоты всего окна может быть html > body > #main, дальше ну никак...

@borovik · 18.03.2014, 20:47 **[ТС]**

ну так html > body > #main > #left
тут #left тоже будет 1000px;

Вопрос почему сдвигается вниз на несколько пикселей.

@EaGames · 18.03.2014, 21:33

так он и есть 1000px, а сдвигает его #title.
то есть если задать margin-top: -высота #title, то его высота будет равна высоты окна

@borovik · 18.03.2014, 21:37 **[ТС]**

Да!
Но теперь title и left налезают друг на друга.
http://jsfiddle.net/3Uk6S/2/
В том и проблема! Как исправить? ((((
пс. спс за отклик

HTML5
1
2
3
4
5
<div id="main">
    <div id="title">Это заголовок</div>
    <div id="left">этот 100% высота</div>
    <div id="cont">это контент</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
body,html{
    margin: 0;
    padding 0;
    height: 100%;
    background-color: lavenderblush;
}
#main{
    background-color: green;
    height: 100%;
}
#title{
     background-color: aqua;
}
#left{
    float: left;
    width: 60px;
    height: 100%;
    margin-top: -20px;
    background-color: grey;
}
#cont{
    margin-left: 75px;
    background-color: red;
}

@EaGames · 18.03.2014, 22:06

я понимаю, но я и пытаюсь сказать что с точными данными (width: 100%, height: 100%) этого не добиться, тут надо подбирать значение..

может так устроит http://jsfiddle.net/3Uk6S/4/ ?

HTML5
1
2
3
4
5
<div id="main">
    <div id="title">Это заголовок</div>
    <div id="left">этот 100% высота</div>
    <div id="cont">это контент</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
body,html{
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: lavenderblush;
}
#main{
    background-color: green;
    height: 100%;
}
#title{
    background-color: aqua;
    padding-left: 60px;
}
#left{
    float: left;
    width: 60px;
    height: 100%;
    top: -20px;
    position: relative;
    background-color: grey;
}
#cont{
    margin-left: 75px;
    background-color: red;
}

хотя нет...

P.S. откликнитесь потом, если найдете решение, самому интересно...

Добавлено через 10 минут
ещё есть такое решение...

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body,html{
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: lavenderblush;
}
#main{
    background-color: green;
    height: 100%;
}
#title{
    background-color: aqua;
}
#left{
    float: left;
    width: 60px;
    height: calc(100% - 20px);
    background-color: grey;
}
#cont{
    margin-left: 75px;
    background-color: red;
}

да вот только оно далеко не кроссбраузерное

@Nikita2014 · 19.03.2014, 11:21

Попробуйте посмотреть следующий вариант: http://jsfiddle.net/SG9WV/

HTML5
1
2
3
4
5
6
<!DOCTYPE html>
<div id="main">
    <div id="left">этот 100% высота</div>
    <div id="title">Это заголовок</div>
    <div id="cont">Это контент</div>
</div>

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
*{
margin: 0;
padding: 0;
}
body,html,#main,#left{
    height: 100%;
    background-color: lavenderblush;
}
#main{
    background-color: green;
}
#title{
    background-color: aqua;
    padding-left: 60px;
}
#left{
    width: 60px;
    height: 100%;
    position: absolute;
    background-color: grey;
}
#cont{
    width: 100%;
    padding-left: 7.3%;
    background-color: red;
}

Vovan-VE · 19.03.2014, 15:28

Комментарий модератора

borovik, EaGames, Nikita2014, Код должен присутствовать в тексте сообщения. Песочницы — это лишь бонус для демонстрации.

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

@borovik 210 / 204 / 52 Регистрация: 25.07.2010 Сообщений: 1,162
	18.03.2014, 20:47 [ТС]
	ну так html > body > #main > #left тут #left тоже будет 1000px; Вопрос почему сдвигается вниз на несколько пикселей. 0

@EaGames 28 / 28 / 13 Регистрация: 03.12.2013 Сообщений: 122
	18.03.2014, 21:33
	так он и есть 1000px, а сдвигает его #title. то есть если задать margin-top: -высота #title, то его высота будет равна высоты окна 1