Wie füllt ein div einen verbleibenden horizontalen Raum?

Question

Ich habe 2 Divs: eine auf der linken Seite und eine auf der rechten Seite meiner Seite. Die linke Seite hat eine feste Breite und ich möchte, dass die rechte Seite den verbleibenden Platz ausfüllt.

#search {
  width: 160px;
  height: 25px;
  float: left;
  background-color: #ffffff;
}

#navigation {
  width: 780px;
  float: left;
  background-color: #A53030;
}

<div id="search">Text</div>
<div id="navigation">Navigation</div>

Answer 1

Das Problem, das ich bei der Antwort von Boushley festgestellt habe, ist, dass die rechte Spalte, wenn sie länger ist als die linke, einfach um die linke herumgezogen wird und wieder den gesamten Platz ausfüllt. Das ist nicht das Verhalten, nach dem ich gesucht habe. Nachdem ich mich durch viele "Lösungen" gewühlt hatte, fand ich ein Tutorial (der Link ist jetzt tot) über die Erstellung dreispaltiger Seiten.

Der Autor bietet drei verschiedene Möglichkeiten an, eine mit fester Breite, eine mit drei variablen Spalten und eine mit festen äußeren Spalten und einer variablen Breite in der Mitte. Viel eleganter und effektiver als andere Beispiele, die ich gefunden habe. Hat mein Verständnis von CSS-Layout deutlich verbessert.

Im obigen einfachen Fall sollten Sie die erste Spalte nach links verschieben und ihr eine feste Breite geben. Dann geben Sie der Spalte rechts einen linken Rand, der etwas breiter ist als die erste Spalte. Das war's. Das war's. Ala Boushley's Code:

Hier ist eine Demo in Stapel-Schnipsel & jsFiddle

#left {
  float: left;
  width: 180px;
}

#right {
  margin-left: 180px;
}

/* just to highlight divs for example*/
#left { background-color: pink; }
#right { background-color: lightgreen;}

<div id="left">  left  </div>
<div id="right"> right </div>

Im Beispiel von Boushley hält die linke Spalte die andere Spalte auf der rechten Seite. Sobald die linke Spalte endet, füllt die rechte wieder den gesamten Raum aus. Hier wird die rechte Spalte einfach weiter in die Seite hineingeschoben, und die linke Spalte nimmt ihren fetten Rand ein. Es sind keine fließenden Interaktionen erforderlich.

Answer 2

Heutzutage sollten Sie die flexbox Methode (kann mit einem Browser-Präfix an alle Browser angepasst werden).

.container {
    display: flex;
}

.left {
    width: 180px;
}

.right {
    flex-grow: 1;
}

Mehr Informationen: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

Die Lösung ergibt sich aus der Eigenschaft display.

Im Grunde müssen Sie die beiden Divs wie Tabellenzellen behandeln. Anstatt also float:left müssen Sie Folgendes verwenden display:table-cell für beide Divs, und für das Div mit dynamischer Breite müssen Sie die width:auto; auch. Die beiden Divs sollten in einen 100% breiten Container mit dem display:table Eigentum.

Hier ist das css:

.container {display:table;width:100%}
#search {
  width: 160px;
  height: 25px;
  display:table-cell;
  background-color: #FFF;
}
#navigation {
  width: auto;
  display:table-cell;
  /*background-color: url('../images/transparent.png') ;*/
  background-color: #A53030;
}

*html #navigation {float:left;}

Und das HTML:

<div class="container">
   <div id="search"></div>
   <div id="navigation"></div>
</div>

WICHTIG: Für den Internet Explorer müssen Sie die float-Eigenschaft auf dem dynamischen Breiten-Div angeben, sonst wird der Raum nicht gefüllt.

Ich hoffe, dass dies Ihr Problem lösen wird. Wenn Sie möchten, können Sie den vollständigen Artikel, den ich darüber geschrieben habe, lesen unter mein Blog .

Answer 4

Da dies eine sehr beliebte Frage ist, möchte ich eine schöne Lösung mit BFC vorstellen.
Codepen-Beispiel für Folgendes aquí .

.left {
  float: left;
  width: 100px;
}
.right {
  overflow: auto;
}

In diesem Fall, overflow: auto löst das Kontextverhalten aus und lässt das richtige Element expandieren nur auf die verbleibende Breite, und es wird sich natürlich auf die volle Breite ausdehnen, wenn .left verschwindet. Ein sehr nützlicher und sauberer Trick für viele UI-Layouts, aber vielleicht schwer zu verstehen, "warum es funktioniert" auf den ersten.

Answer 5

Dies scheint das zu erreichen, was Sie anstreben.

#left {
  float:left;
  width:180px;
  background-color:#ff0000;
}
#right {
  width: 100%;
  background-color:#00FF00;
}

<div>
  <div id="left">
    left
  </div>
  <div id="right">
    right
  </div>
</div>