web-dev-qa-db-fra.com

Comment faire en sorte que les divs soient toujours compatibles avec les divs parents?

Ma question est la suivante: existe-t-il un moyen, sans utiliser JavaScript, de faire en sorte que les divs enfants s’étendent jusqu'aux frontières de leur parent, sans dépasser ces frontières, lorsque vous ne pouvez pas connaître à l’avance la taille du div de parent?

Vous trouverez ci-dessous des exemples de balises/styles illustrant mon problème. Si vous le chargez dans un navigateur, vous verrez que #two et #three s'étendent tous les deux en dehors de leur parent, #one, et font apparaître des barres de défilement. 

Mon problème ne concerne pas tant les barres de défilement, mais le fait que je ne sais pas comment demander aux divs enfants d’occuper la largeur ou la hauteur qui leur reste, plutôt que la hauteur ou la largeur du parent.

<html>
    <head>
        <style>
            html, body {width:100%;height:100%;margin:0;padding:0;}
            .border {border:1px solid black;}
            .margin { margin:5px;}
            #one {width:100%;height:100%;}
            #two {width:100%;height:50px;}
            #three {width:100px;height:100%;}
        </style>
    </head>
    <body>
        <div id="one" class="border">
            <div id="two" class="border margin"></div>
            <div id="three" class="border margin"></div>
        </div>
    </body>
</html>
htmlcssparent
45
Tim Sheiner

J'ai eu un problème similaire, mais dans mon cas, mon contenu indique que la hauteur dépasse les limites de la div parent. Quand cela se produit, je souhaite le faire défiler automatiquement. J'ai pu accomplir cela en utilisant

.vscrolling_container { height: 100%; overflow: auto; }
21
meem

vous pourriez utiliser display: inline-block;

j'espère que c'est utile.

16
a b

Dans votre exemple, vous ne pouvez pas: le 5px margin est ajouté au cadre de sélection de div#two et div#three, ce qui donne leur largeur et leur hauteur à 100% du parent + 5 pixels, ce qui débordera.

Vous pouvez utiliser padding sur l'élément parent pour vous assurer qu'il y a 5px d'espace dans sa bordure:

<style>
    html, body {width:100%;height:100%;margin:0;padding:0;}
    .border {border:1px solid black;}
    #one {padding:5px;width:500px;height:300px;}
    #two {width:100%;height:50px;}
    #three {width:100px;height:100%;}
</style>

ÉDITER: lors des tests, supprimer le width:100% de div#two le laissera fonctionner correctement car les divs sont au niveau du bloc et rempliront toujours la largeur de leurs parents par défaut. Cela devrait effacer votre premier cas si vous souhaitez utiliser la marge.

8
ajm

Il existe deux techniques couramment utilisées pour cela:

  1. Positionnement absolu
  2. Styles de table

Étant donné le code HTML que vous avez fourni ici, la solution utilisant le positionnement absolu est la suivante:

body #one {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: auto;
  height: auto;
}
body #two {
  width: auto;  
}
body #three {
  position: absolute;
  top: 60px;
  bottom: 0;
  height: auto;
}
<html>
<head>
<style>
html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:100%;height:100%;}
#two {width:100%;height:50px;}
#three {width:100px;height:100%;}
</style>
</head>
<body>
	<div id="one" class="border">
		<div id="two" class="border margin"></div>
		<div id="three" class="border margin"></div>
	</div>
</body

Vous pouvez toujours utiliser les éléments table, tr et td directement, en dépit des critiques habituelles, car cela permettra de faire le travail. Si vous préférez utiliser CSS, il n'y a pas d'équivalent pour colspan, vous allez donc probablement vous retrouver avec des tables imbriquées. Voici un exemple:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}
#one {
  box-sizing: border-box;
  display: table;
  height: 100%;
  overflow: hidden;
  width: 100%;
  border: 1px solid black;
}
#two {
    box-sizing: border-box;
    display: table;
    height: 50px;
    padding: 5px;
    width: 100%;
}
#three {
  box-sizing: border-box;
  display: table;
  height: 100%;
  padding-bottom: 60px;
  padding-left: 5px;
  
}
#four {
  display: table-cell;
  border: 1px solid black;
}
#five {
  display: table-cell;
  width: 100px;
  border: 1px solid black;
}
#six {
  display: table-cell;  
}
<html>
	<div id="one">
	    <div id="two">
            <div id="four"></div>
        </div>
        <div id="three">
            <div id="five"></div>
            <div id="six"></div>
        </div>
	</div>
  </html>

5
Ryan

Pour la largeur, rien de plus simple, supprimez simplement la règle width: 100%. Par défaut, la div s’étendra pour s’adapter au conteneur parent. 

La hauteur n'est pas si simple. Vous pouvez faire quelque chose comme le tour de colonne de hauteur égale .

html, body {width:100%;height:100%;margin:0;padding:0;}
.border {border:1px solid black;}
.margin { margin:5px;}
#one {width:500px;height:300px; overflow: hidden;}
#two {height:50px;}
#three {width:100px; padding-bottom: 30000px; margin-bottom: -30000px;}
4
Matt Bridges

Assurez-vous que la div la plus externe a les propriétés CSS suivantes:

.outer {
  /* ... */
  height: auto;
  overflow: hidden;
  /* ... */
}
2
Jiabei Luo

Pour conclure, je pense que la réponse à cette question est qu’il n’ya pas de solution. La seule façon d'obtenir le comportement que je veux, c'est avec javascript.

2
Tim Sheiner

vous pourriez utiliser hériter

#one {width:500px;height:300px;}
#two {width:inherit;height:inherit;}
#three {width:inherit;height:inherit;}
1
Silfverstrom

Si je vous ai bien compris, la méthode la plus simple consiste à faire flotter les enfants. Par exemple:

#one { width: 500px; height: 1%; overflow: hidden; background: red; }
#two { float: left; width: 250px; height: 400px; background: aqua; }
#two { float: left; width: 250px; height: 200px; background: Lime; }

Si vous définissez une dimension (hauteur/largeur) et un dépassement de capacité sur auto ou masqué sur l'élément parent, celui-ci contient tous les éléments enfants flottants.

Notez que débordement: hidden; peut occasionnellement causer des problèmes avec le contenu coupé, auquel cas vous pouvez essayer cette méthode alternative:

http://www.positioniseverything.net/easyclearing.html

1
Olly Hodgson

Si vous voulez que les divs enfants correspondent à la taille du parent, vous devez mettre une marge au moins égale à la taille des bordures enfants sur les divs enfants (child.margin >= child.bordersize).

Pour cet exemple, supprimez simplement le width: 100%; et le hauteur: 100% in #one et supprimez le width: 100% in #two . Cela devrait être quelque chose comme ça:

html, body {width:100%; height:100%; margin:0; padding:0;}    
.border {border:1px solid black;}   
.margin {margin:5px;}  
\#one {}   
\#two {height:50px;}    
\#three {width:100px; height:100%;}
0
Wade