web-dev-qa-db-fra.com

Développez une div pour prendre la largeur restante

Je veux une disposition div en deux colonnes, où chacune peut avoir une largeur variable, par exemple.

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

Je veux que le div 'view' s'étende sur toute la largeur disponible après que 'div' a rempli l'espace requis ..___ Actuellement, mon div 'view' est redimensionné au contenu qu'il contientIl sera également bon si les deux divs prendre toute la hauteur

Non duplication disclaimer:

Augmente div en largeur maximale quand float: left est défini Parce que celui de gauche a une largeur fixe.

Aide avec div - make div adapte la largeur restante Car il me faut deux colonnes alignées à gauche

htmlcsscss3multiple-columns
489
Anurag Uniyal

La solution à ce problème est en réalité très simple, mais pas à tout évident. Vous devez déclencher quelque chose appelé "contexte de formatage de bloc" (BFC), qui interagit avec les flottants d'une manière spécifique.

Prenez juste cette seconde div, retirez le float et donnez-lui overflow:hidden à la place. Toute valeur de dépassement autre que visible fait du bloc sur lequel il est défini devenir un BFC. Les BFC ne permettent pas aux flottants descendants de leur échapper, pas plus qu’ils ne permettent aux flotteurs frères/ancêtres de s’y introduire. L’effet net ici est que la div flottante fera son travail, alors la deuxième div sera un bloc ordinaire, occupant toute la largeur disponible sauf celle occupée par le flottant .

Cela devrait fonctionner sur tous les navigateurs actuels, bien que vous deviez peut-être activer hasLayout dans IE6 et 7. Je ne me souviens pas.

Démonstrations:

977
Xanthir

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

<style>
  #box {
    display: flex;
  }
  #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 ici! Plus d'infos: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

72
B T

Ce serait un bon exemple de ce qui est trivial à faire avec des tables et difficile (sinon impossible, du moins dans un sens multi-navigateur) à faire avec CSS.

Si les deux colonnes avaient une largeur fixe, cela serait facile.

Si l’une des colonnes avait une largeur fixe, ce serait un peu plus difficile, mais tout à fait faisable.

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

26
cletus

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>

21
angel.dimitrov

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
a6hi5h3k

Utilisez 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, c'est que toutes les largeurs doivent être définies explicitement, soit en tant que valeur (px et em fonctionnent parfaitement), ou en tant que pourcentage de quelque chose défini explicitement.

12
joel Moses

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 flex si les navigateurs pris en charge .

11
Reggie Pinkham

Je ne comprends pas pourquoi les gens sont prêts à travailler si dur pour trouver une solution purement CSS pour des mises en page en colonnes simples SO EASY utilisant l'ancienne balise TABLE.

Tous les navigateurs ont encore la logique de disposition de la table ... Appelez-moi un dinosaure peut-être, mais je le laisse vous aider.

<table WIDTH=100% border=0 cellspacing=0 cellpadding=2>
  <tr>
    <td WIDTH="1" NOWRAP bgcolor="#E0E0E0">Tree</td>
    <td bgcolor="#F0F0F0">View</td>
  </tr>
</table>

Beaucoup moins risqué en termes de compatibilité inter-navigateur aussi.

5
PatM

<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="right">View</div>
    <div style="width: <=100% getTreeWidth()100 %>">Tree</div>
    <div class="clear" />
  </div>
  <div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
  </div>

</body>

</html>

3
A.Pramod Kumar

Vous pouvez essayer CSS Grid Layout .

dl {
  display: grid;
  grid-template-columns: max-content auto;
}

dt {
  grid-column: 1;
}

dd {
  grid-column: 2;
  margin: 0;
  background-color: #ccc;
}
<dl>
  <dt>lorem ipsum</dt>
  <dd>dolor sit amet</dd>
  <dt>carpe</dt>
  <dd>diem</dd>
</dl>

3
canon

Une implémentation légèrement différente, 

Deux panneaux div (contenu + extra), côte à côte, content panel se développe si extra panel n'est pas présent.

jsfiddle: http://jsfiddle.net/qLTMf/1722/

1
Rao

Pat - Tu as raison. C'est pourquoi cette solution satisferait à la fois les "dinosaures" et les contemporains. :)

.btnCont {
  display: table-layout;
  width: 500px;
}

.txtCont {
  display: table-cell;
  width: 70%;
  max-width: 80%;
  min-width: 20%;
}

.subCont {
  display: table-cell;
  width: 30%;
  max-width: 80%;
  min-width: 20%;
}
<div class="btnCont">
  <div class="txtCont">
    Long text that will auto adjust as it grows. The best part is that the width of the container would not go beyond 500px!
  </div>
  <div class="subCont">
    This column as well as the entire container works like a table. Isn't Amazing!!!
  </div>
</div>

1
johnmanoahs

Merci pour le plug de Simpl.css!

n'oubliez pas de placer toutes vos colonnes dans ColumnWrapper comme suit.

<div class="ColumnWrapper">
    <div class="Colum­nOne­Half">Tree</div>
    <div class="Colum­nOne­Half">View</div>
</div>

Je suis sur le point de publier la version 1.0 de Simpl.css alors aidez-nous à diffuser le mot!

1
Shaggy

flex-Grow - Ceci définit la capacité d'un élément Flex à se développer si nécessaire. Il accepte une valeur sans unité qui sert de proportion. Il dicte la quantité d'espace disponible à l'intérieur du conteneur flexible que l'article devrait occuper.

Si tous les éléments ont la valeur flex-grow définie sur 1, l'espace restant dans le conteneur sera distribué de manière égale à tous les enfants. Si l'un des enfants a une valeur de 2, l'espace restant occupera deux fois plus d'espace que les autres (ou il tentera de le faire au moins). Voir plus ici

.parent {
  display: flex;
}

.child {
  flex-grow: 1; // It accepts a unitless value that serves as a proportion
}

.left {
  background: red;
}

.right {
  background: green;
}
<div class="parent"> 
  <div class="child left">
      Left 50%
  </div>
   <div class="child right">
      Right 50%
  </div>
</div>

1
Stanislav Ostapenko

Si la largeur de l'autre colonne est fixe, pourquoi ne pas utiliser la fonction calc CSS pour tous les navigateurs courants :

width: calc(100% - 20px) /* 20px being the first column's width */

De cette façon, la largeur de la deuxième rangée sera calculée (c'est-à-dire la largeur restante) et appliquée en réponse. 

1
anit

Vous pouvez utiliser la bibliothèque CSS de W3 qui contient une classe appelée rest, qui ne fait que cela:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

<div class="w3-row">
  <div class="w3-col " style="width:150px">
    <p>150px</p>
  </div>
  <div class="w3-rest w3-green">
    <p>w3-rest</p>
  </div>
</div>

N'oubliez pas de lier la bibliothèque CSS dans la variable header:

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

Voici la démo officielle: W3 School Tryit Editor

0
manar

Je ne sais pas si c'est la réponse que vous attendez, mais pourquoi ne pas définir la largeur de Tree sur "auto" et la largeur de "View" sur 100%?

0
anonymous

J'ai écrit une fonction javascript que j'appelle depuis jQuery $ (document) .ready (). Cela analysera tous les enfants de la division parent et ne mettra à jour que l’enfant le plus à droite.

html

...
<div class="stretch">
<div style="padding-left: 5px; padding-right: 5px; display: inline-block;">Some text
</div>
<div class="underline" style="display: inline-block;">Some other text
</div>
</div>
....

javascript

$(document).ready(function(){
    stretchDivs();
});

function stretchDivs() {
    // loop thru each <div> that has class='stretch'
    $("div.stretch").each(function(){
        // get the inner width of this <div> that has class='stretch'
        var totalW = parseInt($(this).css("width"));
        // loop thru each child node
        $(this).children().each(function(){
            // subtract the margins, borders and padding
            totalW -= (parseInt($(this).css("margin-left")) 
                     + parseInt($(this).css("border-left-width")) 
                     + parseInt($(this).css("padding-left"))
                     + parseInt($(this).css("margin-right")) 
                     + parseInt($(this).css("border-right-width")) 
                     + parseInt($(this).css("padding-right")));
            // if this is the last child, we can set its width
            if ($(this).is(":last-child")) {
                $(this).css("width","" + (totalW - 1 /* fudge factor */) + "px");
            } else {
                // this is not the last child, so subtract its width too
                totalW -= parseInt($(this).css("width"));
            }
        });
    });
}
0
bcr666

Consultez les structures de mise en forme CSS disponibles. Je recommanderais Simpl ou le framework Blueprint légèrement plus complexe.

Si vous utilisez Simpl (ce qui implique d'importer un seul fichier simpl.css), vous pouvez le faire:

<div class="Colum­nOne­Half">Tree</div>
<div class="Colum­nOne­Half">View</div>

, pour une disposition 50-50, ou:

<div class="Colum­nOne­Quarter">Tree</div>
<div class="Colum­nThreeQuarters">View</div>

, pour un 25-75 ans.

C'est si simple.

0
vikas

C'est assez facile avec flexbox. Voir l'extrait ci-dessous. J'ai ajouté un conteneur wrapper pour contrôler le flux et définir une hauteur globale. Des bordures ont également été ajoutées pour identifier les éléments. Notez que les divs se développent désormais à la hauteur, ainsi que de besoin. Les préfixes de fournisseur doivent être utilisés pour flexbox dans un scénario réel, car ils ne sont pas encore totalement pris en charge.

J'ai développé un outil gratuit pour comprendre et concevoir des mises en page à l'aide de flexbox. Découvrez-le ici: http://algid.com/Flex-Designer

.container{
    height:180px;
    border:3px solid #00f;
    display:flex;
    align-items:stretch;
}
div {
    display:flex;
    border:3px solid #0f0;
}
.second {
    display:flex;
    flex-grow:1;
    border:3px solid #f00;
}
<div class="container">
    <div>Tree</div>
    <div class="second">View</div>
</div>

0
Mario Vázquez