CSS Hauteur: Remplissez l'espace disponible. Pas de hauteurs fixes

donc i ont la structure suivanteCSS Hauteur: Remplissez l'espace disponible. Pas de hauteurs fixes

<div id="container"> 
    <div id="head"></div> 
    <div id="body"></div> 
    <div id="foot"></div> 
</div>

Je n'utilise les ids à des fins d'illustration si ce n'est pas même nécessairement une pleine page.

Je souhaite que mon conteneur spécifie une taille fixe ... ou une taille relative, peu importe. Supposons pour le bien de l'argument dire 300px hauteur. Aussi overflow: hidden

Je veux la tête/pied pour étendre à adapter le contenu en lui-même, donc height: auto est suffisante.

Je veux que le corps se dilate pour s'adapter à l'espace restant entre la tête et les pieds. Si le contenu est trop grand, faites défiler (overflow: auto).

height: 100% sur #body ne fonctionne pas, car alors il gagne la hauteur de 300px comme le parent et pousse une partie de lui-même et le pied de page de parent. Avoir la tête et le pied position: absolute ne fonctionne pas car en les sortant du flux de documents, un contenu de #body est masqué. Pour résoudre ce problème, nous pouvons utiliser padding-top/bottom mais nous ne pouvons pas définir un padding-top: xxpx/padding-bottom: xxpx sur le #body car nous ne connaissons pas la hauteur nécessaire de la tête/du pied, donc pourquoi ils sont height: auto.

Edit:

I essayé convertir le conteneur/tête/corps/pied dans une table où le #body est height: 100%. Cela fonctionne très bien, sauf que #body ne défilera pas si le contenu devient trop volumineux, au lieu que la table entière se développe pour afficher tout le contenu. Ce n'est pas le comportement souhaité car j'ai besoin de #body pour faire défiler, pas #content ou son parent.

Des suggestions?

Source

2010-06-30 Dmitriy Likhten

Vous voulez régler l'arrière-plan du corps pour qu'il s'ajuste entre la tête et le pied de page? – galambalazs

Vous pouvez probablement "simuler" l'apparence de ce que vous essayez d'accomplir en pensant à #container en tant que # corps. Vous pouvez également ajouter un élément parent supplémentaire si #container ne peut pas être utilisé avec. Ça dépend de ce que vous cherchez, exactement. – reisio

@reisio: impossible. Le problème est que je veux le pied en bas, et la tête en haut, et le corps pour remplir l'espace. Cela ne me dérange pas d'utiliser #container comme arrière-plan de #body, mais le problème est de faire la position tête/pied et le défilement du corps. C'est plus sur le contenu que sur la couleur de fond. –

La seule solution qui vient immédiatement à l'esprit est display: table-cell, bien que vous rencontriez le problème du manque de support dans ie6 & ie7. Peut-être fournir la règle pour les bons navigateurs, et un peu de javascript pour calculer les différences de hauteur pour ie?

Edit:

Voici une autre approche - en utilisant jQuery pour calculer le décalage. Gardez à l'esprit que c'est juste une tentative rapide - il devrait être testé par navigateur et vous voudriez une manipulation simple des erreurs, etc., mais cela pourrait être un point de départ.

Je ne sais pas si javascript est la façon dont vous voulez aller, mais je ne peux pas le voir en pur css.

J'ai changé les ids aux classes afin que vous pouvez avoir plusieurs boîtes « fixedHeight »:

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Untitled Document</title> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js'></script> 

<script> 

$(function() { 
    $(".fixedHeight").each(function() { 
    var head = $(this).find(".head"); 
    var body = $(this).find(".body"); 
    var foot = $(this).find(".foot"); 
    body.css("margin-top", head.height()).css("margin-bottom", foot.height());  
    }); 
}); 


</script> 

<style> 

.head { 
    background-color: red; 
    position: absolute; 
    top: 0; 
    width:100%; 
} 
.body { 
    background-color: blue; 
    color: white; 
    overflow: auto; 
    position:absolute; 
    top:0; 
    bottom:0; 
    width:100%; 
    margin:2.5em 0; 
} 
.foot { 
    background-color: green;  
    position: absolute; 
    bottom: 0; 
    width:100%; 
} 
.container { 
    background-color: #aaa; 
    border: 10px solid orange; 
    height: 300px; 
    width: 30%; 
    position: absolute; 
} 


</style> 

</head> 

<body> 

<div class="container fixedHeight"> 
    <div class="head"> 
    <h1>Header Content</h1> 
    </div> 
    <div class="body"> 
    <p>Body Content</p> 
    <p>Body Content</p> 
    <p>Body Content</p> 
    <p>Body Content</p> 
    <p>Body Content</p> 
    <p>Body Content</p> 
    </div> 
    <div class="foot"> 
    <p>Footer Content</p> 
    </div> 
</div> 


</body> 
</html>

Source

2010-06-30 21:41:12 DHuntrods

ie7 support est nécessaire. Qu'est-ce que l'affichage dos: cellule-cellule implique? Est-ce que la table-cellule occupe autant d'espace que possible de son parent? –

Cette solution ne fonctionne pas. Afin de l'afficher correctement, j'ai besoin d'un div parent avec 'display: table' mais une table ne semble pas respecter la propriété height. Donc si je mets la table 'height' à 300px, elle s'étendra aussi longtemps que nécessaire. Même avec 'max-height', il ne le respecte pas. J'ai essayé de faire de la tête/du pied comme display: table-row et body comme display: table-cell et container comme display: table et ça marche parfaitement, jusqu'à ce que j'ai besoin d'un corps pour défiler. . –

Bien sûr - la hauteur sur une table implique toujours la hauteur minimale! Peut-être que si vous fournissiez du contexte et du contenu supplémentaires pour ce que vous essayez de faire? Je ne suis pas sûr que cet arrangement précis puisse être fait purement en css, mais peut-être qu'une approche alternative résoudrait le problème? – DHuntrods

Ok donc Heres un peu de recherche, je suis arrivé jusqu'au tri d'obtenir ce travail.

#head { 
    background-color: red; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 
#body { 
    background-color: blue; 
    color: white; 
    border: 0 none; 
    overflow: auto; 
    height: 100%; 
    padding-top: 2.5em; 
    padding-bottom: 2.5em; 
    box-sizing: border-box; 
    webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
} 
#foot { 
    background-color: green; 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 
#container { 
    background-color: #aaa; 
    border: 10px solid orange; 
    height: 300px; 
    width: 30%; 
    overflow: show; 
    position: absolute; 
}

Cela suppose que je peux calculer la taille des #head et #foot et définir la taille totale du remplissage de l'emplacement approprié de #body.Cela va pousser le contenu du corps hors de la zone occupée par # pied/pied en raison de leur positionnement absolu. Le problème ici est que la barre de défilement finit par être coupée partiellement en haut/en bas car seul le contenu est décalé, la barre de défilement ne l'est pas.

Pour la largeur, ce n'est pas vraiment un problème.

Source

2010-07-02 18:14:10

J'ai récemment rencontré ce problème dans une situation où je ne connaissais pas non plus la hauteur totale du conteneur (comme le suppose la réponse de Dmitriy). Disons que la hauteur de #head et #foot sont 50 et 25 respectivement. Voici comment je l'ai résolu:

#body { 
    top: 25px; 
    bottom: 50px; 
    position: absolute; 
} 

#foot { 
    position: absolute; 
    bottom: 0; 
}

Source

2015-09-25 21:23:42 mightybyte

CSS Hauteur: Remplissez l'espace disponible. Pas de hauteurs fixes

Répondre

Questions connexes