CSS: zone contenant 100% de la hauteur avec en-tête de hauteur variable

J'ai une page avec un en-tête à hauteur variable, une zone de contenu et un pied de page. Je veux que la zone de contenu remplisse toujours la fenêtre d'affichage et grandisse verticalement pour s'adapter au contenu si nécessaire. J'ai trouvé beaucoup d'exemples de faire ceci avec des en-têtes de taille fixe, mais aucun où la taille est inconnue.CSS: zone contenant 100% de la hauteur avec en-tête de hauteur variable

Toute solution doit fonctionner dans IE 6, 7 et 8, Firefox 3.x et Safari 4. Est-ce possible avec du CSS pur? Dois-je céder et avoir recours à une disposition basée sur des tableaux? Une exigence supplémentaire est que je peux placer des éléments dans la zone de contenu et les agrandir sur toute la hauteur de la zone de contenu (hauteur de la fenêtre d'affichage, hauteur de l'en-tête, hauteur du pied de page ou plus). Une partie du contenu que nous voulons afficher a ses propres sections "header" et "footer", donc ce que je cherche vraiment, c'est une solution imbriquée.

Source

2009-08-04 Annabelle

Dupe? http://stackoverflow.com/questions/1211331/how-can-i-convert-this-table-based-layout-to-css – cletus

STOP SUPPORT IE6 – Jason

Ce serait difficile à réaliser sans JavaScript. Y a-t-il une raison pour que la zone de contenu occupe la totalité de la fenêtre sans l'en-tête, même s'il n'y a pas de contenu pour l'étirer? Qu'essayez-vous exactement d'accomplir? – kmiyashiro

Ok, donc la propriété CSS min-height ne fonctionne pas :)

J'ai joué avec un fichier HTML réel maintenant et je crois que je trouve un moyen.

.header-footer 
{ 
    height: 10%; 
    background-color: lightYellow; 
    display: table; 
    width: 100%; 
} 

.container 
{ 
    margin-left: auto; 
    margin-right: auto; 
    height: 80%; 
    width: 100%; 
    display: table; 
} 

.inner 
{ 
    background-color: lightPink; 
    height: 100%; 
}

Nous utilisons la propriété display: table pour vous assurer que chaque <div> se prend bien en dessous et sur les autres.

REMARQUE: Vous devez définir une propriété height pour chacun des éléments de la page. Il ne doit pas être aussi grand que 10% que j'ai choisi, mais au moins quelque chose. Une fois que le contenu est inséré dans l'élément qui est plus grand que la valeur de hauteur, il doit être développé.

J'ai créé deux pages HTML séparées pour vous d'examiner pour voir si cela vous convient:

Espérons que c'est ce que vous cherchez .

Merci

Source

2009-08-05 00:12:40 mlevit

Étant donné que IE6 et IE7 ne supportent pas display: table, j'ai été étonné de voir que cela fonctionnait toujours dans IE6 - il y a un défilement vertical de la barre de défilement quelques pixels, mais je parie que ce n'est que du rembourrage par défaut. Le réglage de l'affichage est-il vraiment nécessaire? Je devrai jouer avec ça quand j'aurai plus de temps. – Annabelle

Le 'display: tables' s'assure que chaque div agit comme s'il s'agissait d'une table. Si vous ne l'avez pas, cela ne force pas le div à se développer à mesure que le contenu s'y développe. Si vous utilisez Firebug (un complément Firefox), vous pouvez désactiver la propriété 'display: table' sur mes pages de test et voir par vous-même. – mlevit

@mlevit: les deux exemples de reviewmysite sont en panne. Vous voulez créer un jsfiddle? –

Si vous souhaitez que l'en-tête change de taille, utilisez une hauteur relative. Le contenu remplira déjà la fenêtre verticalement.

Source

2009-08-04 00:36:33

Le panneau de contenu ne remplira la fenêtre que s'il y a suffisamment de "contenu" à l'intérieur pour l'agrandir. Je veux que sa hauteur soit au minimum la hauteur de la fenêtre moins la hauteur de l'en-tête, même s'il s'agit d'un élément vide. – Annabelle

Vous pouvez essayer d'utiliser la propriété CSS min-height dans l'en-tête, le contenu et le pied de page.

par exemple.

.header-footer 
{ 
    min-height: 20%; 
} 

.content 
{ 
    min-height: 80%; 
}

Assurez-vous que vous définissez les <html> et <body> balises d'avoir une min-height: 100% cette façon, vous pouvez remplir toute la fenêtre.

Cela devrait permettre à la page de se développer selon les besoins tout en restant à un minimum de 100%.

Merci

Source

2009-08-04 06:00:40 mlevit

Le problème avec min-height est qu'il ne définit pas réellement la hauteur de l'élément, donc vous ne pouvez pas ajouter quelque chose à .content avec une hauteur de 100% et le remplir .content. Ce dont j'ai vraiment besoin, c'est d'une solution que je peux nicher en elle-même. J'ai édité ma question à cet effet. – Annabelle

Donc, cette solution ne fonctionnera pas? http://peterned.home.xs4all.nl/examples/csslayout1.html –

-1

ai passé une journée à expérimenter avec cette option et a frappé tant Impasses étrange que mon conseil professionnel est maintenant ceci:

Vous avez conçu mal.

Ignorer complètement l'en-tête de hauteur variable. C'est une idée stupide de toute façon. J'ai fait. J'ai bien travaillé pour moi. Maintenant, je suis le fier propriétaire d'une toile d'araignée DOM beaucoup plus simple et sans obstacles qui me conduisent à stackoverflow.

Source

2013-01-01 15:28:42 jchook

S'il vous plaît voir ce violon: http://jsfiddle.net/qH6K3/

<div id="a"> 
    <div id="b1">BOX1</div> 
    <div id="b2">BOX2</div> 
</div> 

* { 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

html,body{height:100%} 

#b1 { 
    background-color: red; 
    height: 45px; 
    width:100%; 
} 

#b2 { 
    background: blue; 
    height: 100%; 
    width: 100%; 
} 

#a { height: 100%; padding-bottom: 45px; }

Source

2014-01-21 07:44:55

S'il vous plaît essayer ce CSS: http://jsfiddle.net/K64Mm/6/ hauteur variable, contenu hauteur de 100% (supports iframe même hauteur de 100%), les barres de défilement superflu, défilants sur les appareils tactiles.

<div class="wrapper"> 
    <div class="top topBar"> 

    </div> 
    <div class="content"> 
     <iframe scrolling="yes" src="http://www.zeffirino.com"></iframe> 
    </div> 
</div> 

html, body { width: 100%; height: 100%; overflow: hidden; margin: 0px; padding: 0px; } 

.wrapper { width: 100%; height: 100%; padding-bottom: 45px; -webkit-overflow-scrolling: touch !important; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } 
.top { height: 45px; background-color: red; } 
.content { height: 100%; width: 100%; overflow: auto !important; } 
.content iframe { display: block; border: none; width: 100%; height: 100%; }

Source

2014-01-21 08:01:32

CSS: zone contenant 100% de la hauteur avec en-tête de hauteur variable

Répondre

Questions connexes