Как сделать div на 100% экрана

@Energizer1 · Регистрация: 15.01.2017

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

Здравствуйте, уважаемые обитатели форума. Столкнулся с такой проблемой: мне нужно, чтобы div был на 100% высоты экрана, но почему-то он отображется на 100% только при открытии страницы, если пролистать ее вниз, то этот div закончится. Наверное, такая тема тут уже была, но мне не помогает ничего. Вот код ХТМЛ и ксс. Указывать значение в 100vh тоже пробовал, не помогло.

HTML5
1
 <div class="main">

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html, body{
    height: 100%;
}
body {
    background-color: #807E81;
}
.main{
    background-color: #211E1E;
    height: 100%;
    width: 80%;
    position: absolute;
    left: 10%;
    right: 10%;
    top: 0px;
}

@mrtoxas · 15.01.2017, 17:22

Energizer1, а что должно происходить при скролле?

@Fedor92 · 15.01.2017, 17:24

CSS
1
2
3
4
html, body{
            height: 100%;
            margin:0
        }

@Energizer1 · 15.01.2017, 17:49 **[ТС]**

mrtoxas, я хочу, чтобы див (в коде он называется main) был на весь экран. Вообще на весь. Чтобы сколько я не скроллил он не заканчивался и был на 100% экрана

Добавлено через 45 секунд
Fedor92, не помогло

@Fedor92 · 15.01.2017, 17:53

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style>
        html, body{
            height: 100%;
            margin:0
        }
        body {
            background-color: #807E81;
        }
        .main{
            background-color: #211E1E;
            height: 100000%;
            width: 100%;
            position: absolute;
            top: 0px;
        }
    </style>
</head>
<body>
    <div class="main"></div>
</body>
</html>

@mrtoxas · 15.01.2017, 18:01

Energizer1, поменяйте position: absolute; на position: fixed; и не закончится он никогда.

@Energizer1 · 15.01.2017, 18:11 **[ТС]**

mrtoxas, да, только потом вниз скроллить страницу не получится)
Fedor92, помогло, конечно, но это не совсем то, что я хочу

@Fedor92 · 15.01.2017, 18:18

Сообщение от Energizer1

Fedor92, помогло, конечно, но это не совсем то, что я хочу

Ну постарайтесь объяснить нам чего хотите, а мы уж предложим чего-нибудь...

А то может Вам вообще parallax нужен...

@Energizer1 · 15.01.2017, 18:56 **[ТС]**

Fedor92, мне нужно, чтобы div (main называется) был на 100% страницы. Именно страницы, а не боди. Чтобы когда я скроллил этот div не заканчивался

@SiarheiSiarhei · 15.01.2017, 20:00

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
@charset "utf-8";
/* CSS Document */
 
body {
    background-attachment: fixed;
    background-color: #DCDCDC;
}
.a-1 {
    height: 50vh;
    position: relative;
}
 
#d1 {
    background-color: #00B1AF;
}
#d2 {
    background-image: url(url);
    background-color: rgba(0,177,175,0.70);
}
#d3 {
    background-color: rgba(0,177,175,0.50);
}
#d4 {
    background-color: rgba(0,177,175,0.25);
}

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Документ без названия</title>
<link href="Untitled-2.css" rel="stylesheet" type="text/css">
</head>
 
<body>
<div class="a-1" id="d1">Здесь располагается содержимое  class "a-1"</div>
<div class="a-1" id="d2">Здесь располагается содержимое  class "a-1"</div>
<div class="a-1" id="d3">Здесь располагается содержимое  class "a-1"</div>
<div class="a-1" id="d4">Здесь располагается содержимое  class "a-1"</div>
</body>
 
</html>

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

Используйте соответствующие теги в редакторе для форматирования кода [HTML], [CSS] и т.д.!

Добавлено через 4 минуты
50vh для лучшего видения .. 100vh

Добавлено через 1 минуту
Используйте соответствующие теги в редакторе для форматирования кода [HTML], [CSS] что именно...

@Energizer1 · 15.01.2017, 23:35 **[ТС]**

SiarheiSiarhei, я же писал уже, что vh не работает

@mrtoxas · 16.01.2017, 00:01

CSS
1
2
3
4
.main{
    /* height: 100%; */
    min-height: 100%;
}

@Energizer1 · 16.01.2017, 18:19 **[ТС]**

mrtoxas, уже пробовал, не помогло.
Слушайте, ребят, если бы моя проблема так легко решалась-я бы не писал на форум. Тут нужен какой-нибудь скрипт, по-моему.

@thedude · 16.01.2017, 18:36

Сообщение от Energizer1

Слушайте, ребят, если бы моя проблема так легко решалась-я бы не писал на форум. Тут нужен какой-нибудь скрипт, по-моему.

Потому что не умеете толково объяснять, что именно хотите!

@Energizer1 · 16.01.2017, 20:55 **[ТС]**

thedude, я уже 3 раза написал, что хочу, чтобы div занимал 100% экрана. Именно экрана. Чтобы он был по размерам, как body и я мог бесконечно скроллить его вниз

@Fedor92 · 16.01.2017, 21:03

Energizer1, поймите, если div будет занимать 100% экрана и будет размером с body, то проскроллить Вы его не сможете... Давайте так попробуем, может есть какой-то сайт на котором реализовано то, что Вы хотите сделать... Может лента, как в ВК?

@thedude · 16.01.2017, 21:28

http://jsfiddle.net/P9sQc/ это нужно?

HTML5
1
<div class="scroll"></div>

CSS
1
2
3
4
5
6
7
.scroll {
    overflow: scroll;
    width: 150px;
    height: 200px;
    margin: 100px auto 0;
    border: solid 1px #ccc;
}

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var el = $('<p>Test item</p>'),
    container = $('.scroll');
 
function load(container) {
    for(var i = 0;i<10;i++) {
        $(container).append(el.clone());
    }
}
 
load(container);
container.on('scroll', function () {
    if (this.scrollHeight - this.clientHeight  <= this.scrollTop) {
        load(container);
    }
})

@mrtoxas · 16.01.2017, 21:36

Не по теме:

Сообщение от Energizer1

хочу, чтобы div занимал 100% экрана. Именно экрана. Чтобы он был по размерам, как body

%-)

@thedude · 16.01.2017, 21:40

Сообщение от Energizer1

чтобы div (main называется) был на 100% страницы. Именно страницы, а не боди.

Сообщение от Energizer1

я уже 3 раза написал, что хочу, чтобы div занимал 100% экрана. Именно экрана. Чтобы он был по размерам, как body

@KakNaZlo · 16.01.2017, 21:54

Может просто необходимо добавить контента в див? Заполни его настолько, что бы тот никогда не заканчивался и скроль себе

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	15.01.2017, 17:22
	Energizer1, а что должно происходить при скролле? 0

@Energizer1 0 / 0 / 0 Регистрация: 15.01.2017 Сообщений: 8
	15.01.2017, 17:49 [ТС]
	mrtoxas, я хочу, чтобы див (в коде он называется main) был на весь экран. Вообще на весь. Чтобы сколько я не скроллил он не заканчивался и был на 100% экрана Добавлено через 45 секунд Fedor92, не помогло 0

@mrtoxas 3827 / 2677 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	15.01.2017, 18:01
	Energizer1, поменяйте `position: absolute;` на `position: fixed;` и не закончится он никогда. 1

@Energizer1 0 / 0 / 0 Регистрация: 15.01.2017 Сообщений: 8
	15.01.2017, 18:11 [ТС]
	mrtoxas, да, только потом вниз скроллить страницу не получится) Fedor92, помогло, конечно, но это не совсем то, что я хочу 0

@Energizer1 0 / 0 / 0 Регистрация: 15.01.2017 Сообщений: 8
	15.01.2017, 18:56 [ТС]
	Fedor92, мне нужно, чтобы div (main называется) был на 100% страницы. Именно страницы, а не боди. Чтобы когда я скроллил этот div не заканчивался 0

@Energizer1 0 / 0 / 0 Регистрация: 15.01.2017 Сообщений: 8
	15.01.2017, 23:35 [ТС]
	SiarheiSiarhei, я же писал уже, что vh не работает 0

@Energizer1 0 / 0 / 0 Регистрация: 15.01.2017 Сообщений: 8
	16.01.2017, 18:19 [ТС]
	mrtoxas, уже пробовал, не помогло. Слушайте, ребят, если бы моя проблема так легко решалась-я бы не писал на форум. Тут нужен какой-нибудь скрипт, по-моему. 0

@Energizer1 0 / 0 / 0 Регистрация: 15.01.2017 Сообщений: 8
	16.01.2017, 20:55 [ТС]
	thedude, я уже 3 раза написал, что хочу, чтобы div занимал 100% экрана. Именно экрана. Чтобы он был по размерам, как body и я мог бесконечно скроллить его вниз 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	16.01.2017, 21:03
	Energizer1, поймите, если div будет занимать 100% экрана и будет размером с body, то проскроллить Вы его не сможете... Давайте так попробуем, может есть какой-то сайт на котором реализовано то, что Вы хотите сделать... Может лента, как в ВК? 0

@KakNaZlo 0 / 0 / 0 Регистрация: 12.01.2017 Сообщений: 21
	16.01.2017, 21:54
	Может просто необходимо добавить контента в див? Заполни его настолько, что бы тот никогда не заканчивался и скроль себе 0