Comment redimensionner la hauteur d'une div à sa hauteur de conteneur, en utilisant CSS?comment redimensionner la hauteur d'une div à sa hauteur de conteneur, en utilisant CSS?
<div class='container'><br>
<div style='display: block; height: 500px'>left</div><br>
<div id='to-be-sized' >right</div><br>
</div>
Pourriez-vous pas définir la hauteur de l'élément contenu à hauteur: 100%;
Non, puisque le conteneur a 'height: auto', donc' height: 100% 'se ramènerait à' auto' – Quentin
Je prends ça en hauteur: auto est la valeur par défaut pour un conteneur qui n'a pas de hauteur explicite définie – AJM
Oui (est le défaut et stackoverflow n'aime pas les commentaires à trois caractères) – Quentin
Si ma compréhension est correcte et la hauteur par défaut d'un div où aucune hauteur n'est spécifiée est auto alors ceci n'est pas possible sans définir une hauteur explicite sur le div contenant. Si une hauteur explicite est définie sur le div contenant alors height: 100% sur le div contenu signifie qu'il croît à la hauteur du conteneur.
Il semble que vous essayez d'obtenir des colonnes de hauteur égale. Vous pouvez utiliser la méthode fauxcolumns où une image d'arrière-plan est utilisée pour simuler la hauteur égale. Il existe d'autres méthodes.
Je dois attester que c'est la méthode la plus simple et qu'elle a le meilleur support pour les navigateurs. – invot
C'est une chose délicate à faire - il n'y a pas de meilleure approche, mais il y en a quelques-unes courantes. Si nous supposons que ce dont vous avez vraiment besoin est que la hauteur de la colonne de droite soit (ou semble être) équivalente à la hauteur de la colonne de gauche, vous pouvez utiliser l'une des techniques fréquemment utilisées pour obtenir des colonnes de hauteur égale. This piece contient quelques astuces pour obtenir le bon look et le bon comportement. Je recommande de le lire pour voir si cela résout votre problème.
L'autre approche utilise Javascript pour déterminer la hauteur du conteneur et définir votre colonne de droite pour cela. Cette technique a été discutée sur SO here. Tant que la taille de votre conteneur n'est pas la seule chose qui détermine la taille de votre conteneur externe, cela devrait être une approche valide (si ce n'est pas le cas, vous aurez un problème d'œuf de poule qui pourrait causer un comportement étrange).
http://www.alistapart.com/articles/fauxcolumns/ <= Article original décrivant la technique des Faux Columns que vous liez - qui est ce que le post le plus demandera vraiment;) –
Exemple de code, vous devez commencer à partir de l'élément html de sorte que vous pouvez utiliser la hauteur flexible dans les conteneurs.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100% Test</title>
<style type="text/css">
html, body, #inner { height: 100% }
#inner { border: 4px blue solid }
#container { height: 200px; border: 4px red solid }
</style>
</head>
<body>
<div id="container">
<div id="inner">
lorem ipsum
</div>
</div>
</body>
</html>Vous pouvez indiquer à la div du conteneur de s'afficher en tant que table et d'afficher le div interne comme cellule de table.
Le code HTML
<body>
<div id="wrap">
<div id="header">
<h1>
My Header</h1>
</div>
<div id="main">
<ul id="nav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<div id="primaryContent">
</div>
</div>
<div id="footer">
<h1>
My Footer</h1>
</div>
</div>
Le CSS
#wrap
{
width: 800px;
margin: auto;
}
#header
{
background: red;
}
#main
{
display: table;
}
#nav
{
background: gray;
width: 150px;
display: table-cell;
}
#primaryContent
{
background: yellow;
padding: 0 .5em;
display: table-cell;
}
Corrections pour IE
#wrap
{
width: 800px;
margin: auto;
}
#header, #footer
{
background: red;
}
#main
{
background: url(../bg.png) repeat-y;
}
#nav
{
background: gray;
width: 150px;
float: left;
}
#primaryContent
{
background: yellow;
margin-left: 150px;
padding: 0 .5em;
}
Il y a une façon de le faire si vous arrive d'être usin g jQuery. Comme vous avez demandé CSS, cette option n'est peut-être pas disponible, mais si vous pouvez l'utiliser, elle fera exactement ce que vous voulez.
$(divToResize).css('height',$(container).innerHeight());
$ (divToResize) est le sélecteur pour la DIV que vous souhaitez correspondre à la hauteur de son emballage et $ (conteneur) est logiquement le conteneur dont la hauteur que vous souhaitez obtenir.
Cela fonctionnera indépendamment du fait que la hauteur du conteneur soit spécifiée en CSS ou non.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.container{
position:relative;
background-color:#999;
}
#to-be-sized{
position:absolute;
top:0;
height:100%;
background-color:#ddd;
}
</style>
<body>
<div class='container'>
<br>
<div style='display: block; height: 500px'>left</div>
<br>
<div id='to-be-sized' >right</div><br>
</div>
</body>
</html>
Vous pouvez:
ou
votre choix :)
Cette réponse m'a fait sourire =). –
Depuis des années et des années les tables ont été détestées par tant de gens, et pour les tables d'année ont été la seule solution fiable à tant de problèmes. La norme CSS a été brisée dès le début. Un problème aussi simple devrait être un morceau de gâteau, mais ce n'est pas le cas. – GetFree
j'ai fait quelque chose de similaire à KyokoHunter:
$('div.row').each(function(){
var rowHeight = $(this).innerHeight();
$(this).children('div.column').css('height',rowHeight);
});
Cela passe par chaque ligne dans une div « table » et fait les hauteurs toutes les sélections, aussi longtemps que le Les divs sont classés en conséquence.
Je sais que cela a été répondu pour toujours, mais quand je rencontre ce problème de nos jours, j'utilise Flex Box. C'est génial. Voir A Complete Guide to Flexbox par Chris Coyier
.parent {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
}
.child {
flex-grow: 1;
}
.child1 {
min-height: 200px;
background-color: #fee;
}
.child2 {
background-color:#eef;
}<div class="parent">
<div class="child child1">Child 1</div>
<div class="child child2">Child 2</div>
</div>Le
Flexbox Layoutmodule (Box flexible) vise à fournir un moyen de tracer, aligner et distribuer l'espace plus efficace entre les articles dans un récipient, même lorsque leur taille est inconnue et/ou dynamique (d'où le mot "flex"). L'idée principale de la disposition flexible est de donner au conteneur la possibilité de modifier la largeur/hauteur (et l'ordre) de ses articles pour mieux remplir l'espace disponible (principalement pour s'adapter à tous les types d'écrans et tailles d'écran) . Un conteneur flexible étend les éléments pour remplir l'espace libre disponible ou les réduit pour éviter le débordement. Plus important encore, la mise en page flexbox est indépendante de la direction par rapport aux mises en page régulières (bloc qui est basé verticalement et en ligne qui est basé horizontalement). Bien que ceux-ci fonctionnent bien pour les pages, ils manquent de flexibilité (sans jeu de mots) pour prendre en charge des applications volumineuses ou complexes (en particulier lorsqu'il s'agit de changer d'orientation, redimensionner, étirer, rétrécir, etc.).
Mieux vaut publier du code réel et citer le lien - de cette façon, si le site tombe en panne, le code sera toujours disponible. – Wex
Les fichiers CSS utilisent la fonction 'padding' pour déterminer la hauteur et la profondeur des conteneurs. Pour modifier la hauteur du champ conteneur, insérez simplement les champs de remplissage pour les conteneurs spécifiés.
L'extrait de code ci-dessous un exemple du CSS utilisé pour une classe de conteneur (vous pouvez trouver cela comme dans le fichier html.
.container{padding-top:100px;padding-bottom:50px}header
ne savent pas que cela est possible, mais intéressé par – Jon