Développer un div pour remplir la largeur restante

StackOverflow https://stackoverflow.com/questions/1260122

  •  12-09-2019
  •  | 
  •  

Question

Je veux une mise en page de div deux colonnes, où chacun peut avoir une largeur variable par exemple. 

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

Je veux la div « vue » div d'étendre à toute la largeur disponible après « arbre » a rempli l'espace nécessaire. Actuellement, mon « vue » div est redimensionnée au contenu qu'il contient Il sera également bon si les deux divs prennent hauteur tout

Non en double avertissement:

div largeur Expand max lorsque le flotteur: gauche est réglé car il celui de gauche a une largeur fixe.

Aide avec div - faire div la largeur restante parce que je besoin de deux colonnes à la fois aligné à gauche

Était-ce utile?

La solution

La solution est en fait très facile, mais pas à tous évidente. Vous devez déclencher ce qu'on appelle un « bloc de mise en forme contexte » (CBF), qui interagit avec des flotteurs d'une manière spécifique.

Il suffit de prendre ce deuxième div, retirez le flotteur, et de lui donner la place overflow:hidden. Toute valeur de débordement visible autre que rend le bloc qu'il est mis sur devenir CBF. Ne permettent pas BFC descendant flotte de les échapper, ni ils ne permettent frères et soeurs / ancêtres flotte de s'immiscer dans eux. L'effet net est que la div flotta fera sa chose, puis la deuxième div sera un bloc ordinaire, en prenant toute la largeur disponible sauf celle occupée par le flotteur .

Cela devrait fonctionner dans tous les navigateurs actuels, bien que vous pourriez avoir à déclencher hasLayout dans IE6 et 7. Je ne me souviens pas.

Demos:

Autres conseils

Je viens de découvrir la magie des boîtes flex (affichage: flex). Essayez ceci: 

<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>

boîtes Flex me donnent le contrôle que je l'ai voulu pendant 15 avait css ans. Son enfin là! Plus d'infos: https://css-tricks.com/snippets/css / a-to-guide-FlexBox /

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

Si les deux colonnes ont été fixées largeur, ce serait facile.

Si l'une des colonnes a été fixée la largeur, 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.

Cochez cette solution sur 

.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>

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>

solution Flexbox

est ce que la propriété est flex-grow pour. 

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

Remarque: Ajouter flex préfixes fournisseurs si nécessaire par votre navigateurs pris en charge .

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éfinis, que ce soit en tant que valeur (px et em fonctionnent très bien), ou comme pour cent de quelque chose elle-même explicitement défini.

Je ne comprends pas pourquoi les gens sont prêts à travailler si dur pour trouver une solution pure CSS pour une présentation simple de colonnes qui sont si faciles à utiliser l'ancien tag TABLE.

Tous les navigateurs ont encore la logique de mise en page de table ... Appelez-moi un dinosaure peut-être, mais je dis le laisser 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é entre navigateurs aussi. 

<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>

Vous pouvez 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>

Merci pour la prise de Simpl.css!

rappelez-vous d'envelopper toutes vos colonnes ColumnWrapper comme ainsi. 

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

Je suis sur le point de sortir la version 1.0 de Simpl.css afin de les aider à passer le mot!

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

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

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

Pat - Vous avez raison. Voilà pourquoi cette solution satisferait à la fois « dinosaures » et 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>

Si la largeur de l'autre colonne est fixée, que diriez-vous en utilisant le fonction CSS calc travail pour tous les navigateurs les plus courants : 

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

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

flex-grow

- Définit le cas échéant la capacité de croître pour un élément flexible. Il accepte une valeur sans unité qui sert de proportion. Elle dicte quel montant de l'espace disponible à l'intérieur du conteneur flexible l'élément devrait prendre.

Si tous les éléments sont flex-grow mis à 1, l'espace restant dans le conteneur sera réparti de façon égale à tous les enfants. Si l'un des enfants a une valeur de 2, l'espace restant prendrait deux fois plus d'espace que les autres (ou il va essayer, au moins). Voir plus 

.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>

Je ne suis pas sûr que ce soit la réponse que vous attendez mais, pourquoi ne vous définissez pas la largeur de l'arbre à « auto » et la largeur de « View » à 100%?

Jetez un oeil sur les cadres de mise en page CSS disponibles. Je recommande Simpl ou, le, cadre du Plan directeur un peu plus complexe.

Si vous utilisez Simpl (qui consiste à importer juste un simpl.css fichier), vous pouvez faire ceci: 

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

, pour une mise en page 50-50 ou: 

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

, pour un 25-75.

Il est aussi simple que cela.

J'ai écrit une fonction javascript que j'appelle de $ jQuery (document) .ready (). Cela va analyser tous les enfants de la div parent et seulement mettre à jour le droit le plus enfant.

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"));
            }
        });
    });
}

Vous pouvez utiliser la bibliothèque CSS W3 qui contient une classe appelée rest qui fait exactement 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>

Ne pas oublier de lier la bibliothèque CSS dans la header de la page: 

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

Voici la démo officielle: W3 école Tryit Editor

Ceci est assez facile en utilisant FlexBox. Voir l'extrait ci-dessous. J'ai ajouté un récipient d'emballage pour contrôler le débit et définir une hauteur globale. Frontières ont été ajoutées et d'identifier les éléments. Notez que divs maintenant étendre sur toute la hauteur et, au besoin. préfixes fournisseurs doivent être utilisés pour FlexBox dans un scénario monde réel depuis est pas encore totalement pris en charge.

J'ai développé un outil gratuit pour comprendre et mises en page en utilisant FlexBox. Vérifiez 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>

Si les deux largeurs sont de longueur variable pourquoi ne calcule pas la largeur avec un certain côté de script ou d'un serveur?

<div style="width: <=% getTreeWidth() %>">Tree</div> 

<div style="width: <=% getViewWidth() %>">View</div>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top