Pb de scroll auto dans un div en fonction de la taille de la fenêtre

Bonjour,

Voilà mon pb :

J'ai un header de 50 px toujours fixe en haut de page (jusque là, normal)
J'ai un un footer de 50 px toujours fixe en bas de page (bon là moins évident, mais ça marche)
Et j'ai un div "contenu" au centre. Mon problème est sur ce div, je voudrai qu'une barre de scroll appraisse automatiquement sur celui ci uniquement, quand la taille du contenu et plus grand que la fenêtre (même en rezisant), donc dépassant le div footer.

J'ai cherché un peu partout mais no réponse. Et je me demande si c'est pas javascript qui peut m'aider...
voici mon code :

html, body {
  height: 100%;
}
body {
	margin: 0;
	padding: 0;
	background-color: #000000;
	font-family: Arial;
	font-size: 12px;
	line-height: 1.5;
	color: #FFFFFF;
	overflow: hidden;
}
#container {
	position: relative;
	min-height: 100%;
	height: 100%;
	voice-family: "\"}\"";
	voice-family: inherit;
	height: auto;
}
html>body #container {
	height: auto;
}
#centre {
	position:absolute;
	padding-bottom: 50px;
	padding-top: 10px;
	padding-right: 10px;
	padding-left: 10px;
	overflow: auto;
}
#bas {
	position: absolute;
	bottom: 0px;
	background-color: #333333;
	width: 100%;
	height: 50px;
}
#head {
	padding: 10px;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #333333;	
}