Question Développez une div pour prendre la largeur restante


Je veux une disposition div à deux colonnes, où chacun peut avoir une largeur variable, par ex.

div {
    float: left;
}
.second {
    background: #ccc;
}
<div>Tree</div>
<div class="second">View</div>

Je veux que le div 'view' s'étende à toute la largeur disponible après que le div 'tree' ait rempli l'espace nécessaire. Actuellement, mon div "view" est redimensionné au contenu qu'il contient Ce sera aussi bien si les deux divs prennent toute la hauteur

Avis de non-duplication:

Développer div jusqu'à la largeur maximale lorsque float: left est défini parce que la gauche a une largeur fixe.

Aide avec div - make div adapter la largeur restante parce que j'ai besoin de deux colonnes alignées à gauche


466
2017-08-11 12:46


origine


Réponses:


La solution à cela est en fait très facile, mais pas à tout évident. Vous devez déclencher quelque chose appelé "contexte de mise en forme de bloc" (BFC), qui interagit avec les flottants d'une manière spécifique.

Il suffit de prendre ce second div, de retirer le flotteur et de le donner overflow:hidden au lieu. Toute valeur de débordement autre que visible fait que le bloc sur lequel il est défini devient un BFC. Les BFC n'autorisent pas les flottants descendants à les échapper, pas plus qu'ils ne permettent aux flottants frères / ancêtres d'y pénétrer. L'effet net ici est que le div flottant fera l'affaire, alors le second sera un bloc ordinaire, prenant toute la largeur disponible sauf celui occupé par le flotteur.

Cela devrait fonctionner avec tous les navigateurs actuels, mais vous devrez peut-être déclencher hasLayout dans IE6 et 7. Je ne me souviens plus.

Démos


943
2017-11-19 23:16



Je viens de découvrir la magie des boîtes flexibles (display: flex). Essaye ça:

<style>
  #box {
    display: flex;
    float: left;
  }
  #b {
    flex-grow: 100;
    border: 1px solid green;
  }
</style>
<div id='box'>
 <div id='a'>Tree</div>
 <div id='b'>View</div>
</div>

Les boîtes flexibles me donnent le contrôle que je souhaitais avoir depuis 15 ans. C'est enfin là! Plus d'informations: https://css-tricks.com/snippets/css/a-guide-to-flexbox/


55
2018-05-28 02:38



Ce serait un bon exemple de quelque chose de trivial à faire avec les tables et difficile (sinon impossible, du moins dans un sens multi-navigateur) à faire avec CSS.

Si les deux colonnes étaient à largeur fixe, cela serait facile.

Si l'une des colonnes avait une largeur fixe, cela serait légèrement plus difficile mais entièrement réalisable.

Avec les deux colonnes de largeur variable, à mon humble avis, vous devez simplement utiliser une table à deux colonnes.


25
2017-08-11 12:49



Vérifiez cette solution

.container {
  width: 100%;
  height: 200px;
  background-color: green;
}
.sidebar {
  float: left;
  width: 200px;
  height: 200px;
  background-color: yellow;
}
.content {
  background-color: red;
  height: 200px;
  width: auto;
  margin-left: 200px;
}
.item {
  width: 25%;
  background-color: blue;
  float: left;
  color: white;
}
.clearfix {
  clear: both;
}
<div class="container">
  <div class="clearfix"></div>
  <div class="sidebar">width: 200px</div>

  <div class="content">
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
    <div class="item">25%</div>
  </div>
</div>


19
2018-01-13 16:22



Ici, cela pourrait aider ...

<html>

<head>
  <style type="text/css">
    div.box {
      background: #EEE;
      height: 100px;
      width: 500px;
    }
    div.left {
      background: #999;
      float: left;
      height: 100%;
      width: auto;
    }
    div.right {
      background: #666;
      height: 100%;
    }
    div.clear {
      clear: both;
      height: 1px;
      overflow: hidden;
      font-size: 0pt;
      margin-top: -1px;
    }
  </style>
</head>

<body>
  <div class="box">
    <div class="left">Tree</div>
    <div class="right">View</div>
    <div class="clear" />
  </div>
</body>

</html>


15
2017-08-11 13:16



Utilisation calc:

.leftSide {
  float: left;
  width: 50px;
  background-color: green;
}
.rightSide {
  float: left;
  width: calc(100% - 50px);
  background-color: red;
}
<div style="width:200px">
  <div class="leftSide">a</div>
  <div class="rightSide">b</div>
</div>

Le problème est que toutes les largeurs doivent être explicitement définies, soit en tant que valeur (px et em fonctionnent bien), soit en pourcentage de quelque chose de défini explicitement.


12
2018-03-09 06:53



Solution Flexbox

html, body {
  height: 100%;
}
.wrapper {
  display: flex;
  height: 100%;
}
.second {
  flex-grow: 1;
}
<div class="wrapper">
  <div style="background: #fc9;">Tree</div>
  <div class="second" style="background: #ccc;">View</div>
</div>

Remarque: Ajoutez des préfixes de fournisseur flexibles si votre navigateurs pris en charge.


8
2017-11-06 08:12