Форум программистов, компьютерный форум, киберфорум
HTML, CSS
Форум программистов и сисадминов Киберфорум > Форум вебмастеров > HTML, CSS
Войти
Регистрация
Восстановить пароль
Карта форума Темы раздела Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.60/25: Рейтинг темы: голосов - 25, средняя оценка - 4.60
0 / 0 / 0
Регистрация: 04.05.2018
Сообщений: 5
1

Как сделать высоту div равной всей высоте документа (с полосой прокрутки)?

29.05.2018, 04:08. Показов 4659. Ответов 7
Метки нет (Все метки)
Author24 — интернет-сервис помощи студентам
Всем доброго времени суток! Вопрос от новичка.

На странице расположены два дива с классами divRed и divGrey. У первого контента минимум или вообще нет, у второго контента много. Один слева, другой справа. Нужно, чтобы каждый из них независимо от контента шел до самого низа документа (ну либо до следующего под ними подвала, если такой имеется).

Задаем в стилях height: 100% , надеясь, что все будет ОК. Однако если контент не умещается в окне браузера по высоте, появляется вертикальная полоса прокрутки, и при прокручивании выясняется, что:

- вариант а) у дивов стоит position: absolute
дива внизу уже и нет (и контент спокойненько существует уже за его пределами); если даже контента на странице немного и в развернутом окне браузера он весь помещается, но затем окно браузера сжать по высоте, так чтобы контент ушел вниз (и соответственно появился вертикальный скролбар), будет та же история;

- вариант б) у дивов стоит position: relative
в этом случае див растягивается по содержимому: если в первом диве ничего нет, то он вообще не отображается, если одна строка, то занимает одну строку; т.е. если у нас несколько дивов-столбцов с разным количеством контента, то только тот дойдет до низа документа, у которого контента больше...

Вопрос собственно такой: как сделать так чтобы все дивы шли до низа документа? Наверняка должно быть простецкое решение, однако я только начинаю изучать HTML/CSS и где-то этот момент упустил.

Ну и второй вопрос больше теоретический: как выяснить реальную высоту документа (естественно в привязке к конкретному размеру окна браузера)? Речь не про высоту экрана и не про высоту окна браузера, т.к. в случае вертикального скролбара это не будут тождественные величины. Прежде всего интересует JavaScript (ну и через консоль браузера тоже интересно, если есть такая возможность).


HTML5
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<html>
 
<head>
    <meta charset="utf-8">
    <style>
        html, body {
        100%;
        margin: 0px;
        }
        .divRed {
        height: 100%; 
        background: red;
        width: 50%;
        position: absolute;
        }
        .divGrey {
        height: 100%; 
        background: grey;
        width: 50%;
        left: 50%;
        position: absolute;
        }
    </style> 
</head>
 
<body>
    <div class="divRed">
    </div>
    <div  class="divGrey"> 
        <p> ТЕКСТ</p>
        <br><br><br><br><br><br>
        <p> ТЕКСТ</p>
        <br><br><br><br><br><br>
        <p> ТЕКСТ</p>
        <br><br><br><br><br><br>
        <p> ТЕКСТ</p>
        <br><br><br><br><br><br>
        <p> ТЕКСТ</p>
        <br><br><br><br><br><br>
        <p> ТЕКСТ</p>
        <br><br><br><br><br><br>
        <p> ТЕКСТ</p>
        <br><br><br><br><br><br>
        <p> ТЕКСТ</p>
        <br><br><br><br><br><br>
        <p> ТЕКСТ</p>
    </div>
</body>
 
</html>
0
Лучшие ответы (1)
Сообщение: #12438322
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
 29.05.2018, 04:08
Ответы с готовыми решениями:

Как сделать высоту блока равной высоте экрана?
Пробую делать height:100%, но как я понял, блок наследовать эти 100% начинает от родителя. Как мне...

Как сделать чтобы div растягивался по высоте документа
Здравствуйте уважаемые форумчане. Есть такой пример кода https://jsfiddle.net/wodgtsdd/ * { ...

div с полосой прокрутки, стиль полосы прокрутки
Добрый день! Подскажите как правильно создать блочный элемент, вероятней всего div встроенный в...

Содержимое div'a не отображается за полосой прокрутки
Здравствуйте. Такая проблема: есть div шириной 100% (фон красный), в нём другой div шириной...

7
Эксперт JSЭксперт HTML/CSS
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
29.05.2018, 08:40 2
1.
HTML5
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

<div class="wrapper">
  <div class="row">
    <div class="divRed">
    </div>
    <div class="divGrey">
      <p> ТЕКСТ</p>
      <br><br><br><br><br><br>
      <p> ТЕКСТ</p>
      <br><br><br><br><br><br>
      <p> ТЕКСТ</p>
      <br><br><br><br><br><br>
      <p> ТЕКСТ</p>
      <br><br><br><br><br><br>
      <p> ТЕКСТ</p>
      <br><br><br><br><br><br>
      <p> ТЕКСТ</p>
      <br><br><br><br><br><br>
      <p> ТЕКСТ</p>
      <br><br><br><br><br><br>
      <p> ТЕКСТ</p>
      <br><br><br><br><br><br>
      <p> ТЕКСТ</p>
    </div>
  </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.wrapper{
  display:table;
  width:100%;
}
.row{
  display:table-row;
}
.divRed,.divGrey{
  display:table-cell;
  width:50%;
}
.divRed{
  background-color:red;
}
.divGrey{
  background-color:grey;
}
2.
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<div class="wrapper">
  <div class="divRed">
  </div>
  <div class="divGrey">
    <p> ТЕКСТ</p>
    <br><br><br><br><br><br>
    <p> ТЕКСТ</p>
    <br><br><br><br><br><br>
    <p> ТЕКСТ</p>
    <br><br><br><br><br><br>
    <p> ТЕКСТ</p>
    <br><br><br><br><br><br>
    <p> ТЕКСТ</p>
    <br><br><br><br><br><br>
    <p> ТЕКСТ</p>
    <br><br><br><br><br><br>
    <p> ТЕКСТ</p>
    <br><br><br><br><br><br>
    <p> ТЕКСТ</p>
    <br><br><br><br><br><br>
    <p> ТЕКСТ</p>
  </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12

.wrapper{
  display:flex;
}
.divRed,.divGrey{
  flex-grow:1;
}
.divRed{
  background-color:red;
}
.divGrey{
  background-color:grey;
}
1
Модератор
Эксперт HTML/CSS
2277 / 1657 / 651
Регистрация: 07.08.2016
Сообщений: 3,972
29.05.2018, 10:09 3
Высота документа: document.documentElement.scrollHeight
1
0 / 0 / 0
Регистрация: 04.05.2018
Сообщений: 5
29.05.2018, 15:31  [ТС] 4
Спасибо, попробовал 2-й вариант - работает) Значит я не пропустил, а просто не дошел до flex (слышал, что это довольно объемная тема для изучения).
Flex - вроде как прогрессивная технология, а все что связано с table - полный отстой (касаемо оформления)?

Добавлено через 16 минут
И за document.documentElement.scrollHeight спасибо)
Вычитал, что браузеры бывает подглючивают и надо брать максимум из значений:
Javascript
1
2
3
4
5

var scrollHeight = Math.max(
  document.body.scrollHeight, document.documentElement.scrollHeight,
  document.body.offsetHeight, document.documentElement.offsetHeight,
  document.body.clientHeight, document.documentElement.clientHeight
);
Хотя возможно информация уже устарела.
0
0 / 0 / 0
Регистрация: 04.05.2018
Сообщений: 5
31.05.2018, 09:53  [ТС] 5
Все-таки второй вариант работает как мне нужно, только если контента в одном из дивов много (если текст растягивает содержимое divGrey как минимум на всю страницу). А вот при таком варианте высота divGrey (ну и divRed) будет равна одному параграфу:

HTML5
1
2
3
4
5
6
7

<div class="wrapper">
  <div class="divRed">
  </div>
  <div class="divGrey">
    <p> ТЕКСТ</p>
   </div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12

.wrapper{
  display:flex;
}
.divRed,.divGrey{
  flex-grow:1;
}
.divRed{
  background-color:red;
}
.divGrey{
  background-color:grey;
}
А хотелось бы, чтобы в независимости от наполнения дивов, они всегда шли до низа документа / подвала.

Понятно, что можно нагородить огород с JS, чтобы на событие window.onresize запускалась функция, которая будет устанавливать высоту еще одного вспомогательного пустого дива равной document.documentElement.scrollHeight и растягивать таким образом недозаполненный divRed или divGrey; и то это, наверное, подойдет на случай без подвала (либо нужно будет высоту подвала вычитать). Но думается, что должен быть вариант проще (с CSS).

Добавлено через 14 минут
В смысле функцию, которая бы запускалась и при загрузке страницы и при window.onresize

Добавлено через 4 часа 55 минут
Нашел временное решение, и к растягиванию дива на всю высоту документа оно не имеет отношения. Но с точки зрения оформления, если задача заключается только в том, чтобы растянуть однотонный фон на всю высоту, может и сойдет.

Нужно подложить под дивы с контентом (где его может быть много, мало или совсем не быть), дивы с position: fixed и с height: 100%:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

    <div class="divRedBackGround">
    </div>
    
    <div class="divRed">
        <p>НЕМНОГО ТЕКСТА</p>
    </div> 
    
    <div class="divGreyBackGround">
    </div>
    
     <div  class="divGrey"> 
        <p> ТЕКСТ</p>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <p> ТЕКСТ</p>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <p> ТЕКСТ</p>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <p> ТЕКСТ</p>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <p> ТЕКСТ</p>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
    </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
27
28

html, body {
        height: 100%;
        margin: 0px;
        }
        .divRed {
        width: 50%;
        background: red;
        position: absolute;        
        }
        .divGrey {
        width: 50%;
        left:  50%;
        background: grey;
        position: absolute;   
        }
        .divRedBackGround {
        width: 50%;
        height: 100%;
        background: red;             
        position: fixed;
        }
        .divGreyBackGround {
        width: 50%;
        height: 100%;
        background: grey;             
        position: fixed;
        left:  50%;
        }
0
Эксперт JSЭксперт HTML/CSS
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
31.05.2018, 13:58 6
Лучший ответ Сообщение было отмечено AlexandrB_1983 как решение

Решение

HTML5
1
2
3
4

<div class="wrapper">
  <div class="block block1"></div>
  <div class="block block2"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.wrapper {  
  min-height:100vh;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
.block {
  flex: 1;
}
.block1 {
  background-color: red;
}
.block2 {
  background-color: green;
}
1
0 / 0 / 0
Регистрация: 04.05.2018
Сообщений: 5
31.05.2018, 17:44  [ТС] 7
Я переписал под себя (убрал лишнее), все работает!

HTML5
1
2
3
4

<div class="wrapper">
  <div class="block1"></div>
  <div class="block2"></div>
</div>
CSS
1
2
3
4
5
6
7
8
9
10
11
12

.wrapper {  
  min-height:100vh;
  display: flex;
  }
.block1 {
  background-color: red;
  width: 10%;  
}
.block2 {
  background-color: green;
  width: 90%; 
}
Я в изначальном примере использовал width: 50% (можно сказать, неверно поставил задачу), а на самом деле ширина блоков неравномерна.

Спасибище, теперь буду разбираться, почему это работает)
0
Эксперт JSЭксперт HTML/CSS
3825 / 2675 / 1521
Регистрация: 12.07.2015
Сообщений: 6,672
Записей в блоге: 4
31.05.2018, 17:45 8
Цитата Сообщение от AlexandrB_1983 Посмотреть сообщение
а все что связано с table - полный отстой (касаемо оформления)
C семантической точки зрения, таблицы должны использоваться при работе с табличными данными. Но в данном случае никакой таблицы нет, есть блоки, которым задаются табличные стили, что вполне себе оправданно в данной ситуации.
0
31.05.2018, 17:45
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
 31.05.2018, 17:45
Помогаю со студенческими работами здесь

Как сделать тень под полосой прокрутки
Вот сайт: flowers-of-life.ru/. С правой стороны под скролл-баром есть еле заметная тень (или мне...

Как растянуть тег DIV по всей высоте странице?
Как растянуть тег DIV по всей высоте странице? Мне нужно чтобы тег DIV, заполненный белым цветом...

CSS. Не полчучается растянуть DIV по всей высоте
вот он на лицо - http://kot.hut4.ru/ левый див с auto растягивается по содержимому, а с height:...

Как сделать высоту сайта без прокрутки
Всем доброго времени суток! Интересует такой вопрос: у меня фон сайта сделан как слайд-шоу(из 12...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru