Erweitern Sie div auf die maximale Breite, wenn float: left gesetzt ist

115

Ich habe so etwas:

<div style="width:100px;float:left">menu</div>
<div style="float:left">content</div>

beide schwimmer sind notwendig. Ich möchte, dass der Inhaltsbereich den gesamten Bildschirm abzüglich der 100 Pixel für das Menü ausfüllt. Wenn ich float nicht benutze, dehnt sich das div genau so aus, wie es sollte. Aber wie stelle ich das ein, wenn float eingestellt ist? Wenn ich etw wie benutze

style=width:100%

Dann erhält das Inhalts-Div die Größe des übergeordneten Div. Dies ist entweder der Body oder ein anderes Div, das ich ebenfalls ausprobiert habe. Daher passt es natürlich nicht direkt in das Menü und wird dann unten angezeigt.

html width Flo
quelle

Antworten:

138

Hoffe, ich habe dich richtig verstanden, sieh dir das an: http://jsfiddle.net/EAEKc/

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      margin-left: 100px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>
Erweitern Sie das Snippet

Merkuro
quelle
5
Die Frage lautet "beide Wagen sind notwendig".
Crescent Fresh
8
Ja, du hast recht und ich stimme zu. Ich denke jedoch, dass Flo dies nur erwähnt hat, weil er denkt, dass sie beide sind! benötigt, um das gewünschte Layout und damit meine alternative Lösung zu erhalten.
Merkuro
@merkuro: guter Punkt. Ich bin damit einverstanden, dass ".right" nicht schweben muss, um den gewünschten Effekt zu erzielen. @Flo: Kannst du bestätigen, muss der Content Div schwebend sein? Wie aus anderen Gründen?
Crescent Fresh
könnte funktionieren werde ich mit , dass ein wenig um versuchen, Sie haben diesen Grund recht, und der Schwimmer ist schöner, aber ich glaube es einfach nicht funktionieren
Flo
2
Ahh jeah und ich sehe wieder den Grund, warum ich es in float geändert habe: Ie7 und Firefox machen es gut, aber dh 5.5 und dh 6 beginnen den Rand am rechten Rand des linken Divs, also hat es eine 236px (die reale Breite, 100) war ein Beispiel) Lücke zwischen beiden Divs
Flo
100

Der am besten kompatible Weg, den ich dazu gefunden habe, ist nicht sehr offensichtlich. Sie müssen den Float aus der zweiten Spalte entfernen und overflow:hiddenauf ihn anwenden . Obwohl dies jeden Inhalt zu verbergen scheint, der außerhalb des Divs liegt, zwingt es den Div tatsächlich dazu, in seinem übergeordneten Element zu bleiben.

Dies ist ein Beispiel dafür, wie Sie Ihren Code verwenden können:

<div style="width: 100px; float: left;">menu</div>
<div style="overflow: hidden;">content</div>

Ich hoffe, dies ist für alle nützlich, die dieses Problem haben. Ich fand, dass es für die Site, die ich erstellt habe, am besten funktioniert, nachdem ich versucht habe, es an andere Auflösungen anzupassen. Leider funktioniert dies nicht, wenn Sie auch divnach dem Inhalt ein rechtsschreibendes Element einfügen. Wenn jemand einen guten Weg kennt, um dies mit guter IE-Kompatibilität zum Laufen zu bringen, würde ich mich sehr freuen, das zu hören.

Neue, bessere Option mit display: flex;

Jetzt, da das Flexbox-Modell ziemlich weit verbreitet ist, würde ich empfehlen, es stattdessen zu verwenden, da es viel mehr flexFlexibilität beim Layout ermöglicht. Hier ist eine einfache zweispaltige Version wie das Original:

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex: 1;">content</div>
</div>

Und hier ist eine dreispaltige mit einer mittleren Spalte mit flexibler Breite!

<div style="display: flex;">
    <div style="width: 100px;">menu</div>
    <div style="flex:1;">content</div>
    <div style="width: 100px;">sidebar</div>
</div>
alanaktion
quelle
Nach einigen weiteren Tests scheint es, dass Sie hasLayout nicht mit "position: relative" auslösen müssen, damit dies in IE 6 funktioniert. Ich bin mir bei IE 5 nicht sicher, aber es ist im Allgemeinen kein Problem, es trotzdem einzuschließen. nur um sicher zu gehen.
Alanaktion
1
Diese Antwort scheint nicht gewürdigt zu werden, aber es ist wirklich gut zu wissen. Mit diesem können Sie schweben, selbst wenn sich ein schwebendes Element im div befindet. Ich bin ein Google "Block Formatierungskontext". jetzt sofort.
Carlos Gil
Der beste Weg ist, eine einfache 2-Spalten-Tabelle zu verwenden, anstatt Zeit damit zu verschwenden, Tonnen von CSS-Tricks hinzuzufügen, die nicht mit dem Browser kompatibel sind
Marco Demaio,
@Marco Ich musste dafür CSS verwenden, da mein Design reagiert. Unterschiedliche Bildschirmgrößen erforderten unterschiedliche Layouts, sodass eine Tabelle nicht funktioniert hätte. Außerdem scheint diese Methode in praktisch jedem Browser zu funktionieren, den noch jemand verwendet.
Alanaktion
1
@MarcoDemaio, mein Punkt war, dass ich auf einer Bildschirmgröße, auf der die kleinere feste Spalte ungefähr so ​​groß wie die Hauptspalte sein würde, wie auf einem mobilen Gerät, wollte, dass die beiden Spalten Zeilen voller Breite werden, was nicht möglich war mit Tabellen, es sei denn, ich wollte Inhalte tatsächlich mit JavaScript verschieben.
Alanaktion
31

Lösung, ohne die Größe am Rand festzulegen

.content .right{
    overflow: auto; 
    background-color: red;
}

+1 für Merkuro, aber wenn sich die Größe des Floats ändert, schlägt Ihre feste Marge fehl. Wenn Sie rechts über CSS verwenden div, ändert sich die Größe mit der Größe auf dem linken Float. So ist es etwas flexibler. Überprüfen Sie die Geige hier: http://jsfiddle.net/9ZHBK/144/

Verwelken
quelle
2
@alanaktion Ich habe das unnötige Auto weggenommen. Die Differenz liegt im Überlaufwert. Anscheinend overflow: hiddenund overflow autoführen zu dem gleichen Verhalten. Ich denke auch, dass die Leute die Geige schätzen.
Wilt
Wenn jemand wissen möchte, warum dies funktioniert, siehe hier: stackoverflow.com/a/1767270/2756409
TylerH
Ich denke, das ist besser als Merkuros Lösung.
SkuraZZ
6

Elemente, die verschoben werden, werden aus dem normalen Flusslayout entfernt, und Blockelemente wie DIVs erstrecken sich nicht mehr über die Breite ihres übergeordneten Elements. Die Regeln ändern sich in dieser Situation. Anstatt das Rad neu zu erfinden, finden Sie auf dieser Website einige mögliche Lösungen, um das zweispaltige Layout zu erstellen, nach dem Sie suchen: http://www.maxdesign.com.au/presentation/page_layouts/

Insbesondere das "Liquid Two-Column Layout".

Prost!

Sean Aitken
quelle
4

Dies ist eine aktualisierte Lösung für HTML 5, wenn jemand interessiert ist und nicht gerne "schwebt".

Die Tabelle funktioniert in diesem Fall hervorragend, da Sie die feste Breite für die Tabelle und die Tabellenzelle festlegen können. 

.content-container{
    display: table;
    width: 300px;
}

.content .right{
    display: table-cell;   
    background-color:green;
    width: 100px;
}

http://jsfiddle.net/EAEKc/596/ Original-Quellcode von @merkuro

Snowie
quelle
+1 endlich etwas, das mit dem Element mit fester Breite rechts funktioniert, auch wenn es technisch kein float verwendet.
Karthik T
+1 also total ja. Nach Jahren des Kampfes mit Schwimmern, Positionen und Tischen ist dies die richtige Lösung. Die akzeptierte Lösung verbreitet unsicheres CSS.
Horace
4

Diese Verwendung kann Ihr Problem lösen.

width: calc(100% - 100px);

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>Content with Menu</title>
  <style>
    .content .left {
      float: left;
      width: 100px;
      background-color: green;
    }
    
    .content .right {
      float: left;
      width: calc(100% - 100px);
      background-color: red;
    }
  </style>
</head>

<body>
  <div class="content">
    <div class="left">
      <p>Hi, Flo!</p>
    </div>
    <div class="right">
      <p>is</p>
      <p>this</p>
      <p>what</p>
      <p>you are looking for?</p>
    </div>
  </div>
</body>

</html>
Erweitern Sie das Snippet

suathd
quelle
Willkommen bei SO. Können Sie eine Erklärung hinzufügen, wie dies funktioniert?
Yacc
3

Und basierend auf merkuroder Lösung von sollten Sie Folgendes verwenden, wenn Sie die linke maximieren möchten:

<!DOCTYPE html>   
<html lang="en">     
    <head>              
        <meta "charset="UTF-8" />   
        <title>Content with Menu</title>                 
        <style>
            .content .left {
                margin-right: 100px;
                background-color: green;
            }
            .content .right {
                float: right;
                width: 100px;
                background-color: red;
            }
        </style>              
    </head>
    <body>        
        <div class="content">
            <div class="right">  
                <p>is</p>
                <p>this</p>
                <p>what</p>
                <p>you are looking for?</p>
            </div>
            <div class="left">
                <p>Hi, Flo!</p>
            </div>
        </div>
    </body>
</html>

Wurde im IE nicht getestet, daher sieht es im IE möglicherweise kaputt aus.

kubilayeksioglu
quelle
1

Die akzeptierte Antwort mag funktionieren, aber ich mag die Idee, Ränder zu überlappen, nicht. In HTML5 würden Sie dies mit tun display: flex;. Es ist eine saubere Lösung. Stellen Sie einfach die Breite für ein Element und flex-grow: 1;für das dynamische Element ein. Eine bearbeitete Version von merkuros fiddle: https://jsfiddle.net/EAEKc/1499/

Christoph Bühler
quelle
0

Hallo, es gibt einen einfachen Weg mit versteckter Überlaufmethode für das rechte Element.

    .content .left {
        float:left;
        width:100px;
        background-color:green;
      }
      .content .right {
        overflow: hidden;
        background-color:red;
      }
<!DOCTYPE html>   
<html lang="en">     
    <head>      
           
        <title>Content Menu</title>         
          
    </head>
    <body>    
    <div class="content">
      <div class="left">
        <p>Hi, Flo! I am Left</p>
      </div>
      <div class="right">  
        <p>is</p>
        <p>this</p>
        <p>what</p>
        <p>you are looking for?</p>
        <p> It done with overflow hidden and result is same.</p>
      </div>
    </div>
    </body>
</html>
Erweitern Sie das Snippet

Sanjib Debnath
quelle
-1

Dies könnte funktionieren: 

    div{
    display:inline-block;
    width:100%;
    float:left;
    }
Kirtan-Shah
quelle