Wie kann ich dieses tabellenbasierte Layout in CSS konvertieren?

Ich habe ein Tabellenbasiertes Layout, das 100% Höhe/Breite ohne Scrollbalken ist. Die Kopfzeile (rot) wird automatisch auf den Inhalt erweitert und ich weiß nicht, wie viele Pixel es sein wird. Die Flüssigkeitstabelle unten gibt genau was ich was.Wie kann ich dieses tabellenbasierte Layout in CSS konvertieren?

<html> 
<body height=100%> 
<table height=100% width=100% padding=0> 
<tr height=1><td colspan=2 bgcolor=red>Fit<br/>to<br/>content<br/>height</td></tr> 
<tr><td bgcolor=blue width=66% valign=top>How can I do this with CSS?</td><td bgcolor=green valign=top> 
<div style="height:100%; width:100%; overflow:auto;"> 
This area can have content that overflows - needs an independent scrollbar.<br/> 
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/> 
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/> 
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/> 
0<br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/> 
</div> 
</td></tr> 
</table> 
</body> 
</html>

Wie kann ich das gleiche Layout in CSS erstellen und es mit häufig verwendeten Browsern arbeiten lassen?

Quelle

2009-07-31 Andrew

Ich kopiere/klebte es und ich scheint nicht zu tun, was Sie in Firefox 3.5 wollen. Die grüne Seitenleiste sollte eine Bildlaufleiste haben, und der Körper sollte nicht, oder? – Alsciende

Ja, sollte es. Ich habe FF3.5 noch nicht auf diesem Rechner installiert. Ich muss das tun - danke, dass du es mir gesagt hast. – Andrew

Die Überschrift sollte nicht zu schwierig sein, für die zwei Spalten, ich denke, Sie müssen faux columns verwenden, um die Farben bis ganz nach unten zu strecken.

Für den Header ich glaube, Sie müssen nur wollen:

HTML:

<div id="header">Fit<br/>to<br/>content<br/>height</div>

CSS:

#header { 
    background-color: red; 
    width: 100%; 
}

P. S. Du hast gerade meine Augen bluten lassen;)

Quelle

2009-07-31 08:47:00

Das sieht so aus, als ob es die Frage beantwortet, die ich gestellt habe, aber ich bin mir nicht sicher, ob es genau meinen Bedürfnissen entspricht. Ich werde es testen und entweder dies als Antwort akzeptieren oder die Frage verfeinern. Vielen Dank. – Andrew

<html> 
<head> 
<style type="text/css"> 
#wrapper 
{ 
height: 100%; 
width: 100%; 
padding: 0; 
} 

#header 
{ 
float: left; 
width: 100%; 
background-color: red; 
} 

#main 
{ 
height: 100%; 
width: 100%; 
float: left; 
} 

#main-left 
{ 
    height: 100%; 
float: left; 
width: 66%; 
background-color: blue; 
} 
#main-right 
{ 
    height: 100%; 
float: left; 
width: 34%; 
background-color: green; 
} 
</style> 
</head> 
<body> 

<div id="wrapper"> 

<div id="header"> 
    Fit<br />to<br />content<br />height 
</div> 

<div id="main"> 

    <div id="main-left"> 
    How can I do this with CSS? 
    </div> 

    <div id="main-right"> 
    Tested in Chrome 2 and IE8 
    </div> 

</div> 

</div> 
</body> 
</html>

Quelle

2009-07-31 08:48:16 usoban

Ich habe diese Lösung in IE8 und Chrome2 versucht. Beide Browser ergeben rechts eine Bildlaufleiste. Es sollte keine Scrollleiste rechts oder unten geben. – Andrew

Ich bin mir ziemlich sicher, dass dies zu Problemen führen wird, wenn der Inhalt jemals die sichtbare Region des Browsers überschreitet, wo die Farbe nicht bis zum Ende des Inhalts fortgesetzt wird. –

Ich habe einige Inhalte hinzugefügt, die im Beispiel zu groß sind, um zu zeigen, wie es bei einem Problem mit dem Überlauf von Inhalten funktionieren soll. – Andrew

Wie kann ich dieses tabellenbasierte Layout in CSS konvertieren?

Antwort

Verwandte Themen