Исправить лишнее пространство на HTML-странице (из-за сворачивания элементов JavaScript)

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

Например: https://0xdf.gitlab.io/2024/05/25/htb-bizness.html

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

JavaScript здесь: https://0xdf.gitlab.io/assets/js/collapsable.js

Элемент, вызывающий проблему, — это третий блок кода в этого раздела:

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

Могу ли я что-то сделать, чтобы предотвратить это? Или исправить ситуацию после того, как она случилась? Я экспериментировал с добавлением команд в JS, чтобы попытаться вызвать перекомпоновку. Либо я что-то не так делаю, либо это не исправляет.

Насколько я понимаю, вы пытаетесь сделать страницу полной ширины, верно?

Jay Diaz 12.07.2024 19:14

Как попытаться убрать гигантское пустое пространство внизу страницы (после конца HTML-элемента).

DCHeel 13.07.2024 04:18
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
50
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Теперь у вас есть .code-collapse{ max-height: 500px; }, но этого недостаточно, чтобы спрятать ребенка .highlight внутри себя.
Используйте свойство overflow, а именно .code-collapse { overflow: hidden; }.

Попробуйте добавить overflow: hidden; в CSS. Он отсекает переполнение этой складной коробки.

Другие вопросы по теме