CSS Flüssigkeit 'Spalte'

Question

Was ist der beste Weg, um dieses Layout in CSS zu bekommen? Stellen Sie sich vor, dass ich drei divs habe, zwei divs innerhalb eines anderen .. der beiden inneren divs, das erste hat eine bestimmte Breite und das zweite div soll den verbleibenden Platz einnehmen.

Im Allgemeinen würde ich am Ende eine bestimmte Breite in der zweiten Spalte festlegen und verwalten, dass am Ende aktualisieren, dass die enthaltenen div Breite geändert.

Wenn ich die feste aber nicht die Flüssigkeit schwebe, wird die Flüssigkeitssäule unter die feste div (was nicht gewollt ist).

+-------+ +--------------------------------------+ 
| fixed | |          | 
+-------+ |    fluid     | 
      |          |   
      |          | 
      +--------------------------------------+ 

<div> 
    <div>fixed</div> 
    <div>fluid</div> 
</div> 

Dies hat eine völlig CSS-Lösung, kein Javascript frameworks- und im Idealfall funktioniert auf den meisten gängigen Browser mit einem Minimum an ‚Hackage‘ (wenn überhaupt).

Ich hoffe, die ASCII-Kunst funktioniert,

Danke.

Answer 1

das Markup

<div id="fixed">fixed content</div> 
<div id="fluid">fluid content</div> 

die css

#fixed { 
    float: left; 
    width: 13em; 
    margin-right: -14em; 
} 
#fluid { 
    margin-left: 14em; 
} 

, die den Trick tun sollten. Ich benutze es auf meiner persönlichen Seite. Die Ränder lassen alles auf dem gleichen Niveau bleiben.

Answer 2

Hoffentlich zumindest hilft Ihnen den Einstieg:

* { 
    margin:0; 
} 

div#wrapper { 
    margin:0; 
    height:auto !important; //IE Hack 
    height:100%; //IE Hack 
    min-height:100%; 
    overflow:auto 
} 

div#fixed{ 
    float:left; 
    position:absolute; 
    background-color:red; 
    margin:0; 
    height:200px; 
    width:200px 
} 

div#fluid{ 
    float:right; 
    position:absolute; 
    left:200px; 
    background-color:blue; 
    display:block; 
    height:80%; 
    width:60% 
} 

Die "Wrapper" Ihre Verpackung div sein würde. Ich habe die Flüssigkeitssäule nur auf eine Breite von 60% eingestellt, so dass man sehen konnte, dass sie flüssig reagieren sollte. Ich habe dies in Opera 10, IE 6 und Firefox 3 mit nur geringen Problemen getestet. Wenn Sie die Breite der Flüssigkeitssäule auf 100% einstellen, möchte IE ein zusätzliches 200px nach rechts hinzufügen. Ich bin mir sicher, dass es dafür irgendwo eine Arbeit gibt.

Answer 3

Sie können Emastic CSS Framework verwenden, die Flüssigkeitssäulen unterstützen. Hier Link funktioniert Beispiel ähnlich wie Ihre "ASCII Kunstwerk" :)

Answer 4

Es gibt eigentlich eine noch einfachere Lösung, die ich vor nicht allzu langer Zeit entdeckt habe. Funktioniert gut mit IE7. Das #fluid div-Element wird neben der festen Position nach oben verschoben und nimmt den verbleibenden Platz ein, während es für alle reaktionsschnellen Sites eine hohe Flexibilität beibehält.

#fixed{ 
    width:200px; 
    float:left; 
} 
#fluid{ 
    overflow:hidden; 
}