Erweitern eines Divs, um die verbleibende Breite zu füllen

Question

Ich möchte ein zweispaltiges Div-Layout, wobei jede Spalte eine variable Breite haben kann, z. B.

div {
  float: left;
}

.second {
  background: #ccc;
}

<div>Tree</div>
<div class="second">View</div>

Ich möchte, dass sich das "view"-Div auf die gesamte verfügbare Breite ausdehnt, nachdem das "tree"-Div den benötigten Platz gefüllt hat.

Derzeit ist mein 'view' div auf den Inhalt angepasst, den es enthält Es wäre auch gut, wenn beide Divs die gesamte Höhe einnehmen würden.

---

Kein doppelter Haftungsausschluss:

• Div auf maximale Breite erweitern, wenn float:left eingestellt ist weil dort die linke Seite eine feste Breite hat.
• Hilfe bei div - div an die verbleibende Breite anpassen weil ich zwei Spalten brauche, die beide nach links ausgerichtet sind

Answer 1

Die Lösung für dieses Problem ist eigentlich sehr einfach, aber nicht zu todo offensichtlich. Sie müssen einen so genannten "Blockformatierungskontext" (BFC) auslösen, der auf eine bestimmte Weise mit Gleitkommazahlen interagiert.

Nehmen Sie einfach das zweite Div, entfernen Sie den Float, und geben Sie ihm overflow:hidden stattdessen. Jeder Überlaufwert, der nicht sichtbar ist, macht den Block, auf den er gesetzt ist, zu einem BFC. BFCs lassen weder zu, dass absteigende Floats sie verlassen, noch lassen sie zu, dass Geschwister/Vorgänger-Floats in sie eindringen. Der Nettoeffekt hier ist, dass die schwimmende div wird sein Ding tun, dann die zweite div wird ein gewöhnlicher Block, wobei alle verfügbaren Breite mit Ausnahme des vom Schwimmer besetzten Bereichs .

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

Demos:

• Links fixiert: http://jsfiddle.net/A8zLY/5/

• Rechts fixiert: http://jsfiddle.net/A8zLY/2/

  div { float: left; }

  .second { background: #ccc; float: none; overflow: hidden; }

  <div>Tree</div> <div class="second">View</div>

Answer 2

Ich habe gerade die Magie der Flexboxen (display: flex) entdeckt. Versuchen Sie 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 seit 15 Jahren bei CSS gewünscht habe. Endlich ist sie da! Mehr Infos: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Verwenden Sie die CSS Flexbox flex-grow Eigenschaft, um den verbleibenden Platz zu füllen.

html, body {
  height: 100%;
}
body {
  display: flex;
}
.second {
  flex-grow: 1;
}

<div style="background: #bef;">Tree</div>
<div class="second" style="background: #ff9;">View</div>

Answer 4

Dies wäre ein gutes Beispiel für etwas, das mit Tabellen trivial und mit CSS schwer (wenn nicht gar unmöglich, zumindest in einem browserübergreifenden Sinne) zu bewerkstelligen ist.

Wenn die beiden 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.

Wenn beide Spalten eine variable Breite haben, sollten Sie IMHO nur eine zweispaltige Tabelle verwenden.

Answer 5

Utilice 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 explizit definiertem selbst.