Adapter Résolution/Design

Bonjour.

Teilijan, Enchanté. Cela fait quelques temps que je viens ici afin d'enrichir mes pauvres connaissances si j'ose dire. Je viens donc de m'inscrire sur le Forum afin de pouvoir progresser et poste donc mon premier message afin de mieux comprendre les problèmes auxquels je suis confronté actuellement.

J'ai donc crée mon tout premier site récemment afin de mourir moins bête et ce, dédie à One piece pour commencer. J'ai encore bien des choses à apprendre et il y aura sans doutes, pas mal d'erreurs dans mon Code HTML alors soyez Indulgents ! * Rougit.

Je me permet donc de vous exposer mon problème :

Après avoir m'être rendu compte que je voulais adapter mon site à toutes résolutions, j'ai donc changé certaines choses de ma page CSS afin de rendre le Site "flexible". J'ai donc découvert le pourcentage qui s'avère vraiment pratique pour cela, notamment en terme de précision puisque Firefox gère les virgules(.) d'après ce que j'ai pu comprendre.
Concrètement, j'ai crée un support et j'ai donc joué sur les positions du fond afin de créer quelque chose de jolie.

http://teilijan.free.fr/accueil.html


Première chose que vous pourrez constater chez vous, c'est que le bas du support ne veut pas s'adapter aux autres résolutions; il ne reste pas figé en bas, chose que j'aimerais. Il y a toujours un "vide" qui se créer entre le support et la fenêtre du navigateur. Ça s'affiche "correctement" chez moi mais cela parait logique puisque je ne peux pas voir plus bas je suppose. (Résolution 1440*990) J'aimerais également que le support s'adapte au fond, j'entends par là, qu'il garde la même proportion puisque le support doit passer au milieu en préservant le Design des côtés.

J'espère avoir été assez clair dans l'ensemble et pardonnez moi pour ce pavé.

Voici le code CSS du corps et du support.

body
{
	width: 100%;
	height: 100%;
	background-image: url(imgs/fond_%20archelune2.png); 
	background-attachment: scroll;
	background-repeat: repeat;
	font-size: 62.5%;
	font-size: .8em; 
	line-height: 1.1; 
	background-position: center top;
	padding: 0em;
	margin: auto
}

#support
{
	width: 55.52%;
	height: 100%;
	background-image: url(imgs/bg_wht.jpg);	
	background-attachment: scroll;
	background-repeat: repeat-y;
	margin-left: auto;
	margin-right: auto;
	border: 1px solid black;
	
}

Si quelques personnes peuvent m'aider à mieux comprendre le problème, j'en serais ravi.
Petite question également. Concernant, les pourcentages, Les autres éléments étant dans le support sont définis par rapport au support , non ? Ou se basent t-ils sur le body ? Merci à Vous.