web-dev-qa-db-ger.com

Erweitern Sie ein div, um die verbleibende Breite zu übernehmen

Ich möchte ein zweispaltiges div-Layout, wobei jedes eine variable Breite haben kann, z.

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

Ich möchte, dass 'view' div auf die gesamte verfügbare Breite erweitert wird, nachdem 'tree' div den benötigten Speicherplatz gefüllt hat . Derzeit wird mein 'view' div auf den Inhalt verkleinert, der darin enthalten ist ganze Höhe einnehmen

Haftungsausschluss nicht duplizieren:

Erweitert div auf die maximale Breite, wenn float: left gesetzt ist Da dort die linke Breite eine feste Breite hat.

Helfen Sie mit div - passen Sie die verbleibende Breite von div an Da ich zwei Spalten brauche, die beide nach links ausgerichtet sind

htmlcsscss3multiple-columns
489
Anurag Uniyal

Die Lösung dafür ist eigentlich sehr einfach, aber nicht bei all offensichtlich. Sie müssen etwas auslösen, das als "Blockformatierungskontext" (BFC) bezeichnet wird, der auf bestimmte Weise mit Floats interagiert.

Nehmen Sie einfach das zweite Div, entfernen Sie den Float und geben Sie stattdessen overflow:hidden. Jeder andere Überlaufwert als sichtbar macht den gesperrten Block zu einem BFC. BFCs erlauben weder den Nachkommen von Floaten, noch können sie mit Geschwistern oder Vorfahren in sie eindringen. Der Nettoeffekt hier ist, dass das floated div sein Ding tut, dann wird das zweite div ein gewöhnlicher Block sein, der die gesamte verfügbare Breite außer der durch den Float besetzten nimmt.

Dies sollte in allen aktuellen Browsern funktionieren, obwohl Sie in IE6 und 7 möglicherweise hasLayout auslösen müssen. Ich kann mich nicht erinnern.

Demos:

962
Xanthir

Ich habe gerade die Magie von Flexboxen entdeckt (Anzeige: Flex). Versuche dies:

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

Flex-Boxen geben mir die Kontrolle, die ich mir Css seit 15 Jahren gewünscht hätte. Es ist endlich da! Weitere Informationen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

72
B T

Dies wäre ein gutes Beispiel für etwas, das mit Tischen trivial zu tun hat, und mit CSS schwer (wenn nicht unmöglich, zumindest im Browser-übergreifend).

Wenn beide Spalten eine feste Breite hätten, wäre dies einfach.

Wenn eine der Spalten eine feste Breite hätte, wäre dies etwas schwieriger, aber durchaus machbar.

Bei beiden Spalten mit variabler Breite müssen Sie IMHO nur eine zweispaltige Tabelle verwenden.

26
cletus

Überprüfen Sie diese Lösung

.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

Hier könnte das helfen ...

<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

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

Das Problem dabei ist, dass alle Breiten explizit definiert werden müssen, entweder als Wert (px und em funktionieren gut) oder als Prozentsatz von etwas, das explizit selbst definiert ist.

12
joel Moses

Flexbox-Lösung

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>

Hinweis: Fügen Sie Flex-Anbieterpräfixe hinzu, wenn dies von Ihren unterstützten Browsern erforderlich ist.

11
Reggie Pinkham

Ich verstehe nicht, warum Menschen so hart arbeiten, um eine reine CSS-Lösung für einfache säulenartige Layouts zu finden, die SO EASY mit dem alten TABLE-Tag sind.

Alle Browser haben immer noch die Tabellenlayout-Logik ... Nennen Sie mich vielleicht einen Dinosaurier, aber ich sage, lassen Sie es Ihnen helfen.

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

Weitaus weniger riskant im Hinblick auf die Cross-Browser-Kompatibilität.

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

Sie können versuchen, CSS-Rasterlayout .

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

Eine etwas andere Implementierung, 

Zwei Div-Panels (Inhalt + Extra) nebeneinander erweitern content panel, wenn extra panel nicht vorhanden ist.

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

1
Rao

Pat - Sie haben recht. Deshalb würde diese Lösung sowohl "Dinosaurier" als auch Zeitgenossen zufrieden stellen. :)

.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

Danke für den Plug von Simpl.css!

denken Sie daran, alle Ihre Spalten in ColumnWrapper zu packen.

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

Ich bin dabei, Version 1.0 von Simpl.css zu veröffentlichen, also helfen Sie, das Word zu verbreiten!

1
Shaggy

flex-Grow - Dies definiert die Fähigkeit eines Flex-Elements, bei Bedarf zu wachsen. Es akzeptiert einen Wert ohne Einheit, der als Anteil dient. Es legt fest, welchen Anteil des verfügbaren Platzes im Flex-Container der Artikel beanspruchen soll.

Wenn für alle Elemente Flex-Grow auf 1 festgelegt ist, wird der verbleibende Platz im Container gleichmäßig auf alle untergeordneten Elemente verteilt. Wenn eines der untergeordneten Elemente den Wert 2 hat, würde der verbleibende Speicherplatz doppelt so viel Speicherplatz beanspruchen wie die anderen (oder es wird versucht). Mehr hier

.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

Wenn die Breite der anderen Spalte festgelegt ist, verwenden Sie die calc CSS-Funktion , die für alle gängigen Browser funktioniert :

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

Auf diese Weise wird die Breite der zweiten Reihe berechnet (d. H. Verbleibende Breite) und ansprechend darauf angewendet. 

1
anit

Sie können die CSS-Bibliothek von W3 verwenden, die eine Klasse namens rest enthält, die genau das tut:

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

Vergessen Sie nicht, die CSS-Bibliothek in der header der Seite zu verlinken:

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

Hier ist die offizielle Demo: W3 School Tryit Editor

0
manar

Ich bin nicht sicher, ob dies die Antwort ist, die Sie erwarten, aber warum setzen Sie nicht die Breite von Tree auf 'auto' und die Breite von 'View' auf 100%?

0
anonymous

Ich habe eine Javascript-Funktion geschrieben, die ich von jQuery $ (document) .ready () aus aufrufe. Dadurch werden alle untergeordneten Elemente des übergeordneten div-Objekts analysiert und nur das rechte untergeordnete Element aktualisiert.

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

Schauen Sie sich die verfügbaren CSS-Layout-Frameworks an. Ich würde Simpl oder das etwas komplexere Blueprint-Framework empfehlen.

Wenn Sie Simpl verwenden (dabei wird nur eine simpl.css -Datei importiert), haben Sie folgende Möglichkeiten

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

für ein 50-50-Layout oder:

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

für eine 25-75 eins.

So einfach ist das.

0
vikas

Dies ist mit der Flexbox relativ einfach. Sehen Sie den Ausschnitt unten. Ich habe einen Wrapper-Container hinzugefügt, um den Fluss zu steuern und eine globale Höhe festzulegen. Es wurden auch Rahmen hinzugefügt, um die Elemente zu identifizieren. Beachten Sie, dass divs jetzt auch nach Bedarf auf die volle Höhe erweitert werden .____ Herstellerpräfixe sollten in einem realen Szenario für Flexbox verwendet werden, da sie noch nicht vollständig unterstützt werden.

Ich habe ein kostenloses Tool entwickelt, um Layouts mit Flexbox zu verstehen und zu gestalten. Schau es dir hier an: 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