CSS HTML - DIV-Höhe füllen verbleibenden Platz

Also ich habe ein layout wie diese:

CSS:

div {
  border: 1px solid
}

HTML:

<div id="col_1" style="float:left;width:150px;">1</div>
<div id="col_2" style="float:left;width:100px;">2</div>
<div id="col_3" style="float:left;width:<REMAINING_WIDTH>;">3</div>

col_1 und col_2 dauern, bis eine Feste Menge an Speicherplatz. Ich will die Dritte Spalte zu nehmen den rest mit. Was ist der beste Weg, dies zu tun dies erreichen?

Danke, ich werde versuchen, alle Antworten.
Nicht Sie waren nur zu Fragen, über die Höhe statt Breite?

InformationsquelleAutor Andy Hin | 2011-02-20

27

Könnte man etwas verrücktes tun, verlassen die javascript-und die nicht-ganz-ready-for-prime-time mit CSS3 Zeug und benutzen Sie die absolute Positionierung.

Sehen dieses jsfiddle.
Bonus-Punkte für Verhalten gut durch den browser, ändert sich die Größe auch.

CSS:
```
#col_1 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 100px;
  background-color: #eee;
}
#col_2 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  width: 150px;
  left: 100px;
  background-color: #ccd;
}
#col_3 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 250px;
  right: 0px;
  background-color: #cdc;
}
```
HTML:
```
<div id='col_1'>Column 1</div>
<div id='col_2'>Column 2</div>
<div id='col_3'>
  Column 3
</div>
```
- Haben Sie testen Sie Ihre Beispiel. Ich nicht sehen, col3 ausfüllen des verbleibenden Platz. jsfiddle.net/Hb6rL/8
- JSFiddle aktualisiert. Nur hatte Sie eine "right: 0px;" auf Spalte 3.
- seufz downvote ohne Kommentar. Schlechte form...
- +1 - Funktioniert Super für mich!
- Dies ist richtig und sollte die akzeptierte Antwort. Einsatz von JavaScript grundlegende layout ist schrecklich bilden.
InformationsquelleAutor FMM
10

Javascript benötigt wird. Wenn Sie möchten, dass alle 3 divs zu füllen, bis die Fenster-Speicherplatz (100%), dann müssen wir, javascript zu verwenden, um zu erkennen, wie viel Platz ist Links und weisen Sie die Höhe von col_3 entsprechend. Mit jQuery können Sie tun
```
var one = $('#col_1').height(),
two = $('#col_2').height(), 
remaining_height = parseInt($(window).height() - one - two); 
$('#col_3').height(remaining_height); 
```
- Dies funktionierte zum größten Teil. Hatte, um einige Puffer-Platz, da die Breite nicht, die padding/margin, etc.
- Wenn Sie möchten, um es mit margin + padding verwenden .outerHeight();
- Es gibt einen Weg, es zu tun, ohne javascript; siehe meine Antwort unten.
- Ihre Antwort ist nicht unten mehr 😉
InformationsquelleAutor Hussein
4

Haben Sie bereits akzeptiert eine Antwort, aber Sie könnte prüfen, CSS Flexbox, die ausgelegt ist, lösen genau dieses problem, ohne sich auf "float:left" hacks. Es funktioniert in Chrome, Safari und FF (mit -webkit-und -moz-Präfixe). Nicht auf IE noch.

Hier einige quick-links:

http://hacks.mozilla.org/2010/04/the-css-3-flexible-box-model/

http://www.terrainformatica.com/w3/flex-layout/flex-layout.htm

http://www.w3.org/TR/css3-flexbox/
- Seien Sie vorsichtig mit flexbox, es wahrscheinlich nicht so funktionieren, wie Sie denken, es funktioniert, es gibt eine neuer Entwurf, die Veränderungen der Art und Weise arbeiten Sie intuitiver werden.
- Nicht, dass ich mich zu verurteilen, Ihr Vorschlag, aber nicht beschreiben-Schwimmer als "hacks" ein bisschen viel? Vor allem angesichts flexboxes (unglückliche) mangelnde Unterstützung.
- In diesen Tagen Flexbox ist der Weg zu gehen, es sei denn, Sie haben die Unterstützung wirklich alten Browsern.
InformationsquelleAutor selbie

Müssen Sie einen block formatting context:

#c1,#c2 {
    background-color: red;
    float: left;
    width: 200px;
}
#c2 {
    background-color: green;
}
#c3 {
    background-color: yellow;
    height: 40px;
    overflow: auto;
}

es ist der überlauf, der macht es arbeiten. Mehr info: http://www.w3.org/TR/CSS2/visuren.html#block-formatting

InformationsquelleAutor rikkertkoppes

Hier ist somthing ich dachte über die Verwendung von etwas CSS. ich habe es getestet in FF12, GC18, SAF5.1 & IE 7,8,9,9 CV.

CSS:

.Clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.Clearfix {
  display: inline-block;
}
html[xmlns] .Clearfix {
  display: block;
}
* html .Clearfix {
  height: 1%;
}
#Wrapper {
  background-color: #FC20C9;
}
#col_1 {
  float: left;
  width: 150px;
  background-color: #FF0000;
}
#col_2 {
  float: left;
  width: 100px;
  background-color: #00CC00;
}
#col_3 {
  width: auto;
  float: none;
  background-color: #0066FF;
  overflow: hidden;
}

HTML:

<div id="Wrapper" class="Clearfix">
  <div id="col_1">Lorem ipsum</div>
  <div id="col_2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
  <div id="col_3">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>
enter code here

InformationsquelleAutor INSURRECTION1ST

0

Entweder mit jQuery zu berechnen, die restlichen Raum, oder verwenden Sie das css3 flexible box zu füllen den verbleibenden Raum:

http://www.html5rocks.com/tutorials/flexbox/quick/

diagram2 ist der Fall Sie wollen - das Letzte Feld mit maximal '-box-flex' wird, nehmen die verbleibenden Raum (Standard-box-flex "0")

InformationsquelleAutor vincicat

Wenn das Ziel von den meisten neueren Browsern können Sie die HTML5 - calc Funktion

CSS:

#col_3 {
  width: calc(100%-(100px+150px));
}
#red {
  border: 1px solid goldenrod;
}
div {
  border: 1px solid;
}

HTML:

<div id="red">
  <div id="col_1" style="width:150px; float:left;">1</div>
  <div id="col_2" style="width:100px; float:left;">2</div>
  <div id="col_3">3</div>
</div>

InformationsquelleAutor Ruslan López

-1

nehmen Sie die Breite, und es sollte zu erweitern, um alles. setzen width:100%, wenn Sie möchten. sollten Sie aus der firebug-plugin für firefox.
- Das funktioniert aber nicht.
- Dies funktioniert nicht in Firefox (das div geht in die nächste Zeile). Wie kann firebug mir mit diesem Problem helfen?
- das wird nicht funktionieren. die 100% werden Sie nur machen, nehmen Sie die Breite des übergeordneten Elements, das offensichtlich nicht dem, was beabsichtigt war.
InformationsquelleAutor changokun
-1

Setzen alle drei DIVS in einem container geben, col 1 und 2 festen breiten und legen Sie das 3. auto ein.
- Das funktioniert aber nicht.
- Dies funktioniert nicht in Firefox leider nicht.
InformationsquelleAutor Tiny Giant Studios

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.