Comment puis-je avoir un en-tête de hauteur fixe avec un contenu div qui occupe 100% de l'espace restant?

Avant de commencer, je sais qu'il y a beaucoup de questions à ce sujet, mais j'ai l'impression que les réponses me manquent sérieusement. Ils n'ont au moins pas de sens pour moi, ou ils n'obtiennent pas ce que je veux. Si vous connaissez des questions avec une solution solide que cela duplique, je l'ai simplement raté; Je vais supprimer celui-ci.Comment puis-je avoir un en-tête de hauteur fixe avec un contenu div qui occupe 100% de l'espace restant?

Si j'ai le code HTML suivant ...

<body> 
    <div id="header"></div> 
    <div id="content"></div> 
</body>

Comment, en termes simples, puis-je faire l'en-tête prendre jusqu'à 50px de la hauteur du port de vue et de faire la partie de contenu remplir le reste de la vue la hauteur du port sans barre de défilement? Idéalement, cela fonctionnerait dans IE6 et sans tables. Merci!

Source

2010-12-06 Carter

http://stackoverflow.com/questions/1303729/iframe-100-height-inside-body-with-padding fonctionne pour moi – bobince

cela semble fonctionner pour moi:

<html> 
    <body> 
     <div style="height:60px; position:fixed; width:100%;"></div> 
     <div style="height:100%; width:100%;"> 
      <p style="padding-top:60px;">hola</p> 
     </div> 
    </body> 
</html>

Source

2010-12-06 22:17:50 elpadi

Avez-vous oublié un lien peut-être? – Carter

Désolé, erreur de formatage. c'est bien maintenant – elpadi

Vous devriez définir 'height: 100%' sur 'html' et' body' pour que cela fonctionne en mode Standards. Et bien sûr IE6 ne fait pas 'fixed'. – bobince

Je ne sais pas si c'est ce dont vous avez besoin, mais il en résultera #content prendre toute la fenêtre et #header est contenu dans cela, alors tout contenu que vous voulu mettre en #content apparaîtra après l'en-tête.

<html> 
    <head> 
     <title>Test</title> 
     <style type="text/css"> 
     body, html { 
     height:100%; 
     } 
     body { 
     margin:0; 
     padding:0; 
     } 
     #header{ 
      height:50px; 
      background:green; 
      width:100%; 
      } 
     #content { 
     background:blue; 
     position:relative; 
     min-height:100%; 
     height:auto !important; 
     height:100%; 
     } 
     </style> 
    </head> 
<body> 
    <div id="content"> 
    <div id="header">I am the header</div> 
    <p>first bit of content</p> 
    </div> 
</body> 
</html>

hauteur: auto! Important; hauteur: 100%; bit est pour IE 6, vous feriez idéalement que dans une feuille de style dirigée sur IE 6 uniquement en utilisant les commentaires de condition IE.

Source

2010-12-06 22:54:11 davidbuttar

Comment puis-je avoir un en-tête de hauteur fixe avec un contenu div qui occupe 100% de l'espace restant?

Répondre

Questions connexes