html/css problème footer

[Great.J]

Bonjour tout le monde !
Je monte mon site web et je présente quelques difficultés avec le footer … Je m’explique :
Ma page s’organise de cette façon :

<[B]body[/B]>
	<header> < !--Correspond au bandeau du haut du site-->
<[B]nav[/B]> < !--Correspond au bandeau de navigation, situé juste sous le header et en display : sticky-->
<[B]div id="body_page"[/B]> < !--Correspond au contenu des différentes pages-->
<[B]footer[/B]>

Tous ces balises sont en position : relative et le body présente ces caractéristiques :
Position : absolute ;
Top : 0 ;
Left : 0 ;
Right: 0;
Width: 80%;
Background-color: “un degrade de couleur”

Voilà mon problème … pour les pages longues, le souci ne se pose pas car le footer est “à la suite du texte” et donc apparait en tout dernier de la page, à l’endroit où on le retrouve sur n’importe quel site internet.
Le problème se révèle sur les petites pages, où le contenu n’est pas suffisamment étendu (verticalement) pour permettre au footer d’arriver en bas de la page. De ce fait, le footer se met à la suite du texte et il y a un blanc derrière.
Sur les pages courtes, si l’affichage est petit (petits écrans / faible résolution), le texte est compressé (car body en %) et donc du coup, rallonge verticalement. De ce fait, le footer se retrouve en bas de page, à sa place. Si l’affichage est grand en revanche (grand écran/grande résolution), le footer colle au texte étendu dans le sens horizontal et cela crée un vide entre le footer et le bas de l’écran.
Vous me direz : « sur ces pages, met le footeren fixed ». Oui, mais le problème c’est que ces pages exposent des diagrammes généralement pas bien haut (500px max) et j’aimerai qu’ils ne soient pas coupés !
J’espère avoir été clair dans mes explications … merci de vos réponses.
-----