Получить высоту элемента, содержащего высоту всех его дочерних элементов - PullRequest
Новая
       3

Получить высоту элемента, содержащего высоту всех его дочерних элементов

0 голосов
/ 29 апреля 2020

Я ищу вариант, чтобы получить высоту элемента с высотой всех его дочерних элементов.

Пример

Я хочу узнать полную высоту тела следующего сайта с встроенный контейнер прокрутки (https://simon-frey.eu/splashTest/container.html): 

<html><head>
<style>
        body,div{
            height: 100%;
            overflow: hidden;
            font-size: 3em;
        }
        div{
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div>
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
13<br>
14<br>
15<br>
16<br>
17<br>
18<br>
19<br>
20
</div>

</body></html>

Используя найденные мной варианты, я получаю только высоту тела (высота окна 100%): 

document.body.scrollHeight

document.body.clientHeight

getComputedStyle(document.body).height

Если окно имеет высоту 1000 пикселей, а содержимое внутри него имеет высоту 2000 пикселей, все эти параметры возвращают 1000 пикселей вместо 2000 пикселей, которые я хочу получить.

1 Ответ

0 голосов
/ 29 апреля 2020

Это потому, что ваш элемент <body> на самом деле не прокручивается, а вложенный <div>, так как вы установили overflow: hidden для тела, но overflow-y: auto для <div>.

если вы хотите получить высоту всего содержимого на странице, вам нужно запросить это <div> и получить доступ к его свойству scrollHeight. 

console.log(document.querySelector('.scroller').scrollHeight);
<html><head>
<style>
        body,div.scroller{
            height: 100%;
            overflow: hidden;
            font-size: 3em;
        }
        div.scroller{
            overflow-y: auto;
        }
    </style>
</head>
<body>
<div class="scroller">
1<br>
2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
13<br>
14<br>
15<br>
16<br>
17<br>
18<br>
19<br>
20
</div>

</body></html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...