Динамическкое изменение css свойств тега body

@rayden reed · Регистрация: 10.02.2014

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

Здравствуйте.

У меня html страничка отображается на пол экрана.
Можно ли на javascript сделать так чтобы body растягивалось на высоту окна браузера?

JavaScript
1
document.documentElement.clientHeight

- выводит как раз высоту.

пытался сделать так:

JavaScript
1
2
var body = document.body;
body.style.height = document.documentElement.clientHeight;

но ничего не выходит.

и еще вопрос.
в стилях для body прописал

CSS
1
background: linear-gradient(to bottom, green, white);

можно теперь с помощью javascript убрать это свойство и поставить вместо него обычный цвет типа

CSS
1
background: lightgreen;

?

@Balanaar · 05.12.2016, 19:44

Ммм... body по умолчанию занимает всю область экрана. Как по высоте, так и по ширине.
Если у вас почему-то получилось иначе, назначьте стили для элемента <body> самостоятельно:

CSS
1
2
3
4
body {
   width: 100%;
   height: 100%;
}

@Fedor92 · 05.12.2016, 20:29

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

body по умолчанию занимает всю область экрана.

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

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

@Balanaar · 05.12.2016, 20:45

Именно это я и имел в виду

Спасибо за поправки. Насчёт отступов - вроде от браузера зависит дефолтовый margin.

@Fedor92 · 05.12.2016, 21:34

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

Насчёт отступов - вроде от браузера зависит дефолтовый margin

Внешний отступ есть во всех броузерах, но это тоже для общей справки...

@rayden reed · 07.12.2016, 15:54 **[ТС]**

пробовал все советы.

CSS
1
2
3
4
5
6
7
8
body {
    b1ackground: linear-gradient(to bottom, green, white);
    border: 5px solid red;
    width: 100%;
    height:100%;
    margin: 0;
    padding: 0;
}

красная рамка все ровно заканчивается на половине экрана. переход градиента тоже заканчивается перед нижней рамкой и повторяется сначала после неё (типа зелёный-белый и ещё раз зелёный-белый).
но если ставлю вместо градиента:

CSS
1
background: green;

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

я хочу сделать так, чтобы градиент в body разворачивался на всю высоту и не повторялся (т е просто зелёный-белый).
по этому я подумал про javascript, с помощью которого можно конкретно задать высоту.

если это можно сделать без скрипта, то как?
и, все таки, как правильно передать высоту окна в css с помощью скрипта?

@Fedor92 · 07.12.2016, 16:07

rayden reed, можно попробовать для body указать min-height:100%, если конечно внутри body не будет элементов со свойством float, а если такие будут дополнительно указать для body свойство overflow:hidden

Добавлено через 53 секунды

Сообщение от rayden reed

и, все таки, как правильно передать высоту окна в css с помощью скрипта?

Это моно сделать только на css без скриптов!

@rayden reed · 07.12.2016, 19:58 **[ТС]**

короче нашел.
способ jquery.
подключаем библиотеку jquery:

HTML5
1
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

и скрипт:

JavaScript
1
2
3
4
5
6
7
function setHeight() {
    $('body').css( {height: $(window).height() + 'px'} );
}       
document.body.onload = function(){
    setHeight();
}
$(window).resize( setHeight );

а потом нашел и способ без скриптов. надо было прописать всего одно свойство. только прописывать надо не для body, а для html.

CSS
1
2
3
html {
    height: 100%;
}

что и было в примере Fedor92, но я успешно провтыкал этот момент

Добавлено через 14 минут
снова не так написал.
свойства height хватило чтоб мой градиент отобразился на всю высоту.
но для высоты body надо писать все как в примере Fedor92:

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

Новые блоги и статьи Все статьи Все блоги /
http://iceja.net/ сервер решения полиномов iceja 18.01.2026 Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .	Расчёт переходных процессов в цепи постоянного тока igorrr37 16.01.2026 / * Дана цепь постоянного тока с R, L, C, k(ключ), U, E, J. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа, решает её и находит: токи, напряжения и их 1 и 2 производные при t = 0;. . .	Восстановить юзерскрипты Greasemonkey из бэкапа браузера damix 15.01.2026 Если восстановить из бэкапа профиль Firefox после переустановки винды, то список юзерскриптов в Greasemonkey будет пустым. Но восстановить их можно так. Для этого понадобится консольная утилита. . .	Сукцессия микоризы: основная теория в виде двух уравнений. anaschu 11.01.2026 https:/ / rutube. ru/ video/ 7a537f578d808e67a3c6fd818a44a5c4/
WordPad для Windows 11 Jel 10.01.2026 WordPad для Windows 11 — это приложение, которое восстанавливает классический текстовый редактор WordPad в операционной системе Windows 11. После того как Microsoft исключила WordPad из. . .	Classic Notepad for Windows 11 Jel 10.01.2026 Old Classic Notepad for Windows 11 Приложение для Windows 11, позволяющее пользователям вернуть классическую версию текстового редактора «Блокнот» из Windows 10. Программа предоставляет более. . .	Почему дизайн решает? Neotwalker 09.01.2026 В современном мире, где конкуренция за внимание потребителя достигла пика, дизайн становится мощным инструментом для успеха бренда. Это не просто красивый внешний вид продукта или сайта — это. . .	Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114

@Balanaar 2463 / 1769 / 625 Регистрация: 11.07.2016 Сообщений: 4,067
	05.12.2016, 20:45
	Именно это я и имел в виду Спасибо за поправки. Насчёт отступов - вроде от браузера зависит дефолтовый margin. 0

Динамическкое изменение css свойств тега body

Решение