Problème css3 : "position:fixed; height: auto; overflow: hidden;"

Bonjour,

Je suis en train de développer mon site personnel.
Mon site contient un bandeau utilisateur "BarreUti" en haut du site :

#BarreUti {
background-color: white;
position: fixed;
width: 100%;
height: auto;
overflow: hidden;
left: 0px;
top: 0px;
border-bottom: 5px solid #4B610B;
}

Ainsi que le contenu général du site

#site{
width:90%;
height: auto;
overflow: hidden;
background-color:white;
border-radius:12px;
-moz-border-radius:12px;
-webkit-border-radius:12px;
margin-top: 3%;
margin-bottom: auto;
margin-left: auto;
margin-right: auto;
padding: 2%;
}

Afin que rien ne déborde du bandeau lorsque l'on diminue la fenêtre, j'ai ajouté les propriétés "height: auto; overflow: hidden;".

Problème : lorsque l'on diminue la fenêtre, le height du bandeau étant en auto, il cache une partie du contenu de la page. Comment faire pour que margin-top de la div site soit respecté à tout moment ? J'avoue être à court d'idée, un passage javascript est il obligatoire ? O_o j'aimerai gérer l'intégralité en css3 ...

Dans l'attente de votre réponse,
Merci d'avance.

Bonjour.

Ah mon dieu un width:100% ! XD

Ton problème me semble un peu insoluble en tant que tel. Je te proposerais de mettre une hauteur définie à ton bandeau (surtout si sa taille ne varie pas), et l'équivalent en marge haute sur ton #site.

Je connaissais pas les mediaqueries, ça me semble être une bonne solution je vais essayer ça

Pour ceux qui tombe sur ce sujet :
http://www.alsacreations.com/article/lire/930-css3-media-queries.html

MERCI !!