Solved main size bug

This commit is contained in:
Kevin Veen-Birkenbach 2025-03-18 13:30:38 +01:00
parent 20c4a4809b
commit 3284684282
No known key found for this signature in database
GPG Key ID: 44D8F11FD62F878E
2 changed files with 13 additions and 21 deletions

View File

@ -1,27 +1,19 @@
function adjustScrollContainerHeight() { function adjustScrollContainerHeight() {
// Elemente ermitteln
const headerEl = document.querySelector('header');
const navEl = document.querySelector('nav');
const footerEl = document.querySelector('footer');
const mainEl = document.getElementById('main'); const mainEl = document.getElementById('main');
if (!mainEl) return;
const scrollContainer = mainEl.querySelector('.scroll-container'); const scrollContainer = mainEl.querySelector('.scroll-container');
if (!scrollContainer) return; const container = mainEl.parentElement;
const scrollbarContainer = mainEl.parentElement.querySelector('#custom-scrollbar');
let siblingsHeight = 0; let siblingsHeight = 0;
if (headerEl) { Array.from(container.children).forEach(child => {
const headerRect = headerEl.getBoundingClientRect(); if(child !== mainEl && child !== scrollContainer && child !== scrollbarContainer) {
siblingsHeight += headerRect.height; const style = window.getComputedStyle(child);
} const height = child.offsetHeight;
if (navEl) { const marginTop = parseFloat(style.marginTop) || 0;
const navRect = navEl.getBoundingClientRect(); const marginBottom = parseFloat(style.marginBottom) || 0;
siblingsHeight += navRect.height*2; siblingsHeight += height + marginTop + marginBottom;
} }
if (footerEl) { });
const footerRect = footerEl.getBoundingClientRect();
siblingsHeight += footerRect.height;
}
// Verfügbare Höhe berechnen: Fensterhöhe minus Höhe der Geschwister // Verfügbare Höhe berechnen: Fensterhöhe minus Höhe der Geschwister
const availableHeight = window.innerHeight - siblingsHeight; const availableHeight = window.innerHeight - siblingsHeight;

View File

@ -33,9 +33,9 @@
{% block content %}{% endblock %} {% block content %}{% endblock %}
</div> </div>
</main> </main>
<!-- Custom scrollbar element fixiert am rechten Rand --> <!-- Custom scrollbar element fixiert am rechten Rand -->
<div id="custom-scrollbar"> <div id="custom-scrollbar">
<div id="scroll-thumb"></div> <div id="scroll-thumb"></div>
</div> </div>
{% set menu_type = "footer" %} {% set menu_type = "footer" %}
{% include "moduls/navigation.html.j2" %} {% include "moduls/navigation.html.j2" %}