Lassen Sie ein Div die verbleibende Breite ausfüllen

86

Wie kann ich ein Div dazu bringen, die verbleibende Breite auszufüllen?

<div id="Main" style="width: 500px;">
    <div id="div1" style="width: 100px;"></div>
    <div id="div2"></div>
    <div id="div3" style="width: 100px; float: right;"></div>
</div>

Wie kann ich div2den Rest auffüllen?

html css Raklos
quelle
Um eine aktuelle und richtige Antwort zu erhalten, ändern Sie bitte die ausgewählte beste Antwort in die Antwort von Adrien Be.
Edwardtyl
Ich brauchte das Gegenteil, ein zentrales Div mit fester Breite und flüssige äußere Divs. Ich habe unten eine Antwort hinzugefügt, falls jemand anderes sie benötigt.
Damndaewoo

Antworten:

63

Probieren Sie so etwas aus:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; background-color: #fcc; }
    #middle-div { margin-left: 100px; margin-right: 100px; background-color: #cfc; }
    #right-div { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="left-div">
        left div
    </div>
    <div id="right-div">
        right div
    </div>
    <div id="middle-div">
        middle div<br />bit taller
    </div>
</div>

divs nehmen natürlich 100% der Breite ihres Containers ein, diese Breite muss nicht explizit festgelegt werden. Durch Hinzufügen eines linken / rechten Randes, der dem der beiden Seitendivs entspricht, wird der eigene Inhalt gezwungen, zwischen ihnen zu sitzen.

Beachten Sie, dass das "mittlere Div" im HTML nach dem "rechten Div" steht

Leigh
quelle
1
Ich denke, ich habe eine noch bessere Lösung gefunden, die auf Ihrer (großartigen) Lösung basiert :) siehe unten in der Antwort, die ich gebe
Adrien Be
Gibt es eine Möglichkeit, dies zu tun, ohne die Reihenfolge der Artikel zu ändern? dh links-div, mittel-div, rechts-div. Dies ist wichtig, wenn Sie verschiedene Dinge auf verschiedenen Bildschirmgrößen ausführen möchten.
Eliezer Steinbock
Ja, diese Reihenfolge von links nach rechts in der Mitte ist wirklich der Trick. Es verbietet dem richtigen Div, nicht unter die beiden Divs zu gehen, oder?
Ansjovis86
48

Aktuelle Lösung (Oktober 2014): Bereit für flüssige Layouts

Einführung:

Diese Lösung ist noch einfacher als die von Leigh. Es basiert tatsächlich darauf.

Hier können Sie feststellen , dass das mittlere Element (in unserem Fall mit "content__middle"Klasse) ist nicht jede dimensionale Eigenschaft angegeben hat - keine Breite, noch Polsterung, noch Spielraum ähnliche Eigenschaft überhaupt - aber nur ein overflow: auto;(siehe Anmerkung 1).

Der große Vorteil ist, dass Siemax-widthmin-width jetzt ein und ein für Ihre linken und rechten Elemente angeben können . Das ist fantastisch für Fluid - Layout .. daher ansprechendes Layout :-)

Anmerkung 1: Versus Leighs Antwort, bei der Sie der Klasse die margin-left& margin-right-Eigenschaften hinzufügen müssen "content__middle".

Code mit nicht fließendem Layout:

Hier haben die linken und rechten Elemente (mit Klassen "content__left"und "content__right") eine feste Breite (in Pixel): daher als nicht fließendes Layout bezeichnet.

Live-Demo auf http://jsbin.com/qukocefudusu/1/edit?html,css,output

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content {
        width: 100%;
    }
    .content__left {
        width: 100px;
        float: left; /* [1] */
        background-color: #fcc;
    }
    .content__middle {
        background-color: #cfc;
        overflow: auto; /* [2] */
    }
    .content__right {
        width: 100px;
        float: right; /* [3] */
        background-color: #ccf;
    }
</style>

<div class="content">
    <div class="content__left">
        left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

Code mit flüssigem Layout:

Hier haben die linken und rechten Elemente (mit Klassen "content__left"und "content__right") eine variable Breite (in Prozent), aber auch eine minimale und maximale Breite: daher als fließendes Layout bezeichnet.

Live-Demo in einem fließenden Layout mit den max-widthEigenschaften http://jsbin.com/runahoremuwu/1/edit?html,css,output

<style>
    /*
     * [1] & [3] "floats" makes the 2 divs align themselves respectively right & left
     * [2] "overflow: auto;" makes this div take the remaining width
     */
    .content { 
        width: 100%; 
    }
    .content__left { 
        width: 20%; 
        max-width: 170px;  
        min-width: 40px;  
        float: left; /* [1] */
        background-color: #fcc; 
     }
    .content__middle { 
        background-color: #cfc; 
        overflow: auto; /* [2] */
    }
    .content__right { 
        width: 20%; 
        max-width: 250px; 
        min-width: 80px; 
        float: right; /* [3] */
        background-color: #ccf; 
    }
</style>

<div class="content">
    <div class="content__left">
        max-width of 170px & min-width of 40px<br />left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>left div<br/>
    </div>
    <div class="content__right">
        max-width of 250px & min-width of 80px<br />right div<br/>right div<br/>right div<br/>right div<br/>
    </div>
    <div class="content__middle">
        middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br/>middle div<br />bit taller
    </div>
</div>

Browser-Unterstützung

Getestet auf BrowserStack.com in den folgenden Webbrowsern:

  • IE7 bis IE11
  • Ff 20, Ff 28
  • Safari 4.0 (Windows XP), Safari 5.1 (Windows XP)
  • Chrome 20, Chrome 25, Chrome 30, Chrome 33,
  • Oper 20
Adrien Be
quelle
2
Ich würde allen Entwicklern empfehlen, diese Methode zu verwenden, zumal Responsive Web Design zu einer Notwendigkeit geworden ist. :)
Aullah
1
Vorsicht mit diesem. In einigen Fällen wird die Bildlaufleiste im Inhaltsbereich von Firefox angezeigt, wenn die Höhen aufgrund eines Überlaufs nicht korrekt sind: auto;
Jason
Hallo Jason, das ist sehr interessant, danke, dass du darauf hingewiesen hast. Können Sie eine jsfiddle bereitstellen, um ein Live-Beispiel zu zeigen, wenn dies passiert?
Adrien Be
liegt das daran, dass overflowein Blockformatierungskontext erstellt wird? hätte display: flexden gleichen Effekt?
Jayen
1
Ja, das hat es getan. developer.mozilla.org/en-US/docs/Web/Guide/CSS/… war sehr hilfreich. endete damit, dass overflow-y: hiddenes a) erlaubte, die Breite einzustellen, b) die beste Browser-Unterstützung hat und c) keine Tabelle war
Jayen
38

Flexboxen sind die Lösung - und sie sind fantastisch. Ich wollte so etwas seit einem Jahrzehnt aus CSS. Alles, was Sie brauchen, ist, display: flexIhren Stil für "Main" und flex-grow: 100(wobei 100 willkürlich ist - es ist nicht wichtig, dass es genau 100 ist) zu ergänzen . Versuchen Sie, diesen Stil hinzuzufügen (Farben hinzugefügt, um den Effekt sichtbar zu machen):

<style>
    #Main {
        background-color: lightgray;
        display: flex;
    }

    #div1 {
        border: 1px solid green;   
        height: 50px; 
        display: inline-flex; 
    }
    #div2 {
        border: 1px solid blue;    
        height: 50px;
        display: inline-flex;
        flex-grow: 100;
    }
    #div3 {
        border: 1px solid orange;        
        height: 50px;
        display: inline-flex;
    }
</style>

Weitere Informationen zu Flexboxen finden Sie hier: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

BT
quelle
Flexbox ist großartig, nimmt aber nur so viel Platz ein, wie es benötigt, anstatt den gesamten verbleibenden Platz. Also ging ich mit dem Überlauf: Autolösung.
ThinkBonobo
@ThinkBonobo was meinst du mit "es"? Eine Flexbox selbst verhält sich wie ein "Block", und Elemente in einer Flexbox können definitiv mehr Platz beanspruchen, als sie benötigt.
BT
@ BT bedeutet die Hauptzentrale div. Es ist definitiv eine Lösung, die in vielen Fällen funktioniert, aber nicht für meinen speziellen Anwendungsfall.
ThinkBonobo
1
@ThinkBonobo Wette, ich könnte es für Sie arbeiten lassen, wenn Sie eine jsFiddle
BT
20

Flexbox-Lösung

.main {
  display: flex;
}
.col-1, .col-3 {
  width: 100px;
}
.col-2 {
  flex-grow: 1;
}
<div class="main">
  <div class="col-1" style="background: #fc9;">Left column</div>
  <div class="col-2" style="background: #eee;">Middle column</div>
  <div class="col-3" style="background: #fc9;">Right column</div>
</div>
Erweitern Sie das Snippet

Hinweis: Fügen Sie bei Bedarf von Ihren unterstützten Browsern Präfixe für Flex-Anbieter hinzu .

Reggie Pinkham
quelle
Beste Antwort tbh. Funktioniert 4 Jahre später und sauberer als andere Lösungen. +1
Harry J
4

Obwohl es zu bitspät ist, eine Antwort zu veröffentlichen, ist hier ein alternativer Ansatz ohne Verwendung von Rändern.

<style>
    #divMain { width: 500px; }
    #div1 { width: 100px; float: left; background-color: #fcc; }
    #div2 { overflow:hidden; background-color: #cfc; }
    #div3 { width: 100px; float: right; background-color: #ccf; }
</style>

<div id="divMain">
    <div id="div1">
        div 1
    </div>
    <div id="div3">
        div 3
    </div>
    <div id="div2">
        div 2<br />bit taller
    </div>
</div>

Diese Methode funktioniert wie Magie, aber hier ist eine Erklärung :) \

Spielen Sie hier mit einem ähnlichen Beispiel.

Sunny R Gupta
quelle
4

Die Div, die den verbleibenden Platz einnehmen muss, muss eine Klasse sein. Die anderen Divs können IDs sein, aber sie müssen breit sein.

CSS :

#main_center {
    width:1000px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    display:block;
}
#left {
    width:200px;
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    background:#c6f5c6;
    float:left;
}
.right {
    height:100px;
    padding:0px 0px;
    margin:0px auto;
    overflow:hidden;
    background:#000fff;
}
.clear {
    clear:both;
}

HTML :

<body>
    <div id="main_center">
        <div id="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>
</body>

Über den folgenden Link ist der Code in Aktion, mit dem das Problem der verbleibenden Gebietsabdeckung behoben werden soll.

jsFiddle

Avishek Bose
quelle
1

Ich suchte nach einer Lösung für das entgegengesetzte Problem, bei dem ich ein Div mit fester Breite in der Mitte und ein Div mit flüssiger Breite auf beiden Seiten benötigte. Deshalb habe ich mir Folgendes ausgedacht und dachte, ich würde es hier posten, falls jemand es braucht.

#wrapper {
  clear: both;
  width: 100%;
}

#wrapper div {
  display: inline-block;
  height: 500px;
}

#center {
  background-color: green;
  margin: 0 auto;
  overflow: auto;
  width: 500px;
}

#left {
  float: left;
}

#right {
  float: right;
}

.fluid {
  background-color: yellow;
  width: calc(50% - 250px);
}
<div id="wrapper">
  <div id="center">
    This is fixed width in the centre
  </div>
  <div id="left" class="fluid">
    This is fluid width on the left
  </div>
  <div id="right" class="fluid">
    This is fluid width on the right
  </div>
</div>
Erweitern Sie das Snippet

Wenn Sie die Breite des #centerElements ändern , müssen Sie die Eigenschaft width von .fluidauf Folgendes aktualisieren :

width: calc(50% - [half of center width]px);
damndaewoo
quelle