Es ist überhaupt nicht unmöglich, und Sie sollten Javascript nicht benötigen. Sie benötigen einige IE6-spezifische Hacks, wenn Sie diesen Browser interessieren.
Der Schlüssel zum Layout ist die Tatsache, dass Sie eine oder mehr Kantenpositionen auf einem absolut positionierten Element setzen können. Hier ist ein guter Artikel über die Technik: http://www.alistapart.com/articles/conflictingabsolutepositions/
Hier ist eine Demo: http://www.spookandpuff.com/examples/2col2section.html
und Quelle:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>2 col, 2 section layout.</title>
<style type="text/css" media="screen">
#leftColumn {
position:absolute;
top:10px;
bottom:10px;
left:10px;
width:400px;
}
#rightColumn {
position:absolute;
top:10px;
bottom:10px;
right:10px;
left:410px;/* This must equal the total width of the #leftColumn, incl padding, border, margin, etc. */
}
.topSection{
position:absolute;
top:10px;
height:120px;
left:10px;
right:10px;
padding:10px;
}
.bottomSection{
position:absolute;
bottom:10px;
top:160px; /* This must equal the total height of the .topSection, incl padding, border, margin, etc. */
left:10px;
right:10px;
padding:10px;
overflow-y:auto;
}
/* Debug styles */
body {background-color:#CCC;}
div {border:1px solid #FFF;}
#leftColumn {background-color:#7EF4B0;}
#rightColumn {background-color:#EEF4A7;}
#leftColumn .topSection{background-color:#56A97A;}
#rightColumn .topSection{background-color:#D6D06D;}
</style>
</head>
<body>
<div id="leftColumn">
<div class="topSection">
<p>Left column, top section.</p>
</div>
<div class="bottomSection">
<p>Left column, bottom section.</p>
<p>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.</p>
</div>
</div>
<div id="rightColumn">
<div class="topSection">
<p>Right column, top section.</p>
</div>
<div class="bottomSection">
<p>Right column, bottom section.</p>
<p>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.</p>
<p>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.</p>
</div>
</div>
</body>
</html>
Es gibt ein paar Tricks: Zunächst einmal, ich getestet dies nur in Firefox, um Sie Die allgemeine Idee - es gibt einige notwendige Korrekturen für IE, die ich nicht hinzugefügt habe: Überprüfen Sie die Liste auseinander Artikel oben für Details.
Ich habe 10px zusätzlichen Platz um alle Boxen erlaubt, nur um die Idee zu veranschaulichen - Sie würden diese wahrscheinlich auf 0 in einem echten Layout setzen.
Sie die Höhe .topSection unterschiedlich zwischen den Spalten mit einigen Regeln wie festlegen können:
#leftColumn .topSection {height:xxx}
#leftColumn .bottomSection {top:xxx}
#rightColumn .topSection {height:yyy}
#rightColumn .bottomSection {top:yyy}
ich einen Behälter mit einer Klasse (oder eine Klasse auf dem Body-Tag) verwenden würde die Breite der spezifizieren linke Spalte, so etwas wie:
#container.narrow #leftColumn {width:100px}
#container.medium #leftColumn {width:200px}
#container.wide #leftColumn {width:400px}
Damit können Sie eine Reihe von 'Vorlagen' Breite definieren, zwischen denen Sie wechseln können.
sollte ziemlich einfach sein, solange links und rechts kann das Verhältnis der Bildschirmbreite sein. Kann ich einen deiner Versuche sehen? – edl
Welche Browser unterstützen Sie? – drusnov
Sollte ziemlich einfach sein, wenn Sie bereit sind, etwas Arbeit zu machen. – User