CSS En-tête de taille relative/pied de page

Question

Je ne suis pas un expert en CSS, je pourrais manquer quelque chose d'évident. J'essaie de définir un en-tête et un pied de page de taille relative (de sorte que sur les gros moniteurs, l'en-tête et le pied de page soient plus grands que sur les petits écrans). Pour ce faire, j'utilise un pourcentage de hauteur. Cependant, cela ne fonctionne que si je mets le position à absolute. Le problème est, en le définissant à absolu signifie qu'il chevauche la partie principale de l'écran (entre l'en-tête et le pied de page). Le paramétrer sur relatif ne fonctionne pas car il repose sur des éléments se trouvant dans l'en-tête/pied de page. Ce est ce que mon tête ressemble à:

.header 
{ 
    position:absolute; 
    top:0px; 
    background-color:white; 
    width:100%; 

    height:30%; 

} 

la page ASPX contient simplement

<div class="header"></div> 

Est-il possible d'obtenir en-tête relativement aux proportions et pieds de page?

Merci

Answer 1

Pour que les éléments prennent une hauteur en pourcentage, vous devez définir le HTML et le BODY pour qu'ils aient également une hauteur définie. Puisque vous ne savez pas ce que c'est, utilisez 100%.

html, body { 
    height:100%; 
} 

Answer 2

Pour utiliser les hauteurs en pourcentage le parent a besoin d'avoir une hauteur fixe, parce que si le parent est auto hauteur alors il dépendra de la hauteur du contenu de l'enfant .... qui dépend de la hauteur de parent etc. Je pense que lorsque vous définissez la position pour être absolue, il prend la fenêtre d'affichage comme élément parent qui a une taille fixe (théorie par moi), ce qui explique pourquoi il fonctionne avec absolu.

Je ne pense pas que ce soit une bonne idée d'essayer de faire l'en-tête et le pied de page proportionnels en fonction de la résolution du navigateur. Cela n'a vraiment pas beaucoup de sens pour moi, honnêtement, vous allez devoir essayer d'augmenter et de réduire les tailles de police ou les images que vous avez dans l'en-tête pour correspondre, etc. Si vous voulez vraiment, je vous suggère d'avoir CSS différent feuilles de style que les utilisateurs peuvent choisir (ou est sélectionné automatiquement par javascript). De cette façon, si quelqu'un a une résolution énorme, il peut choisir le plus grand s'il le souhaite (ou automatiquement choisi pour lui). De cette façon, vous n'avez pas à faire face à des problèmes de mise à l'échelle.