Mir ist nicht ganz klar, wie du dir das genau vorstellst. Wenn du möchtest, dass sich alle „Layout“-Bestandteile der Seite prozentual an die Viewport-Breite anpassen, musst du ihre Breiten jeweils in Prozent angeben. Dazu sei aber gesagt, dass Browser nicht so richtig gut in Berechnungen mit Kommazahlen sind.
[INDENT]Beispiel:
Eine Menüleiste mit 4 Einträgen, die jeweils ein Viertel des Platzes einnehmen, soll sich über 60 % der zur Verfügung stehenden Viewport-Breite erstrecken. Der Viewport wird nun mit der Maus auf eine Breite von 950 px gezogen. Das gibt dem Menü einen Raum von 570 px. Die 25 % davon, die jedes Menüelement einnehmen soll, betragen 570 px / 4 = 142.5 px. Jedes Menüelement soll also 142.5 px breit sein. Halbe Pixel sind auf normalen Bildschirmen allerdings nicht darstellbar.
Der Client hat nun die Wahl, ob er 142 px oder 143 px annehmen möchte. Nimmt er 142 px an, entsteht rechts vom Menü ein Rand von 2 px. Nimmt er 143 px an, rutscht vermutlich das letzte Menüelement in die nächste Zeile, da es nicht mehr in den Bereich von 570 px passt.
In der Realität sind die Berechnungsalgorithmen etwas komplexer, aber das grundsätzliche Problem existiert und sollte bedacht werden.[/INDENT]
Ich würde zum Beispiel empfehlen, ein Hintergrundbild über den gesamten Viewport zu legen (siehe Link im vorherigen Post) und für den Inhaltsbereich mit min-width und max-width zu arbeiten.
In etwa so (habe die CSS3-Variante genommen, wird nur in einem neuen Browser klappen):
[html]
<head>
<meta charset="utf-8" />
<title>Demo</title>
<style type="text/css">
html {
background: url(http://upload.wikimedia.org/wikipedia/commons/0/0e/Corot_Rome_View_from_the_Farnese_Gardens.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
body {
padding: 50px;
font-family: Garamond, Georgia, ‚Times New Roman‘, serif;
}
.wrapper {
min-width: 400px;
max-width: 1000px;
padding: 20px;
border: 5px solid #ccc;
margin: 0 auto;
background: white;
}
<body>
<div class="wrapper">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend purus vitae diam iaculis quis sollicitudin felis venenatis. Pellentesque lacinia mauris at arcu posuere ultricies. Donec ornare ullamcorper neque sed laoreet. Donec pharetra eros dolor, et bibendum arcu. Fusce sagittis viverra mi volutpat interdum. Aliquam vestibulum, lorem ut ultricies mollis, augue felis pharetra urna, id dignissim lectus lacus non arcu. Nullam lectus justo, rhoncus et elementum quis, pellentesque vitae nisi. Cras dapibus purus a sem condimentum vitae pharetra enim vulputate. Fusce vitae urna tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi nec erat eu odio fringilla tristique vel vitae ante. Aliquam aliquam, enim ut sagittis mollis, est dui adipiscing leo, ac rhoncus nibh est eu ligula. Phasellus fringilla luctus dui, eget iaculis turpis eleifend vitae. Maecenas justo sem, eleifend et tristique ac, porta non nunc. Morbi nulla mauris, volutpat nec feugiat non, cursus dictum risus. Nullam lobortis viverra ipsum vel vehicula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend purus vitae diam iaculis quis sollicitudin felis venenatis. Pellentesque lacinia mauris at arcu posuere ultricies. Donec ornare ullamcorper neque sed laoreet. Donec pharetra eros dolor, et bibendum arcu. Fusce sagittis viverra mi volutpat interdum. Aliquam vestibulum, lorem ut ultricies mollis, augue felis pharetra urna, id dignissim lectus lacus non arcu. Nullam lectus justo, rhoncus et elementum quis, pellentesque vitae nisi. Cras dapibus purus a sem condimentum vitae pharetra enim vulputate. Fusce vitae urna tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi nec erat eu odio fringilla tristique vel vitae ante. Aliquam aliquam, enim ut sagittis mollis, est dui adipiscing leo, ac rhoncus nibh est eu ligula. Phasellus fringilla luctus dui, eget iaculis turpis eleifend vitae. Maecenas justo sem, eleifend et tristique ac, porta non nunc. Morbi nulla mauris, volutpat nec feugiat non, cursus dictum risus. Nullam lobortis viverra ipsum vel vehicula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend purus vitae diam iaculis quis sollicitudin felis venenatis. Pellentesque lacinia mauris at arcu posuere ultricies. Donec ornare ullamcorper neque sed laoreet. Donec pharetra eros dolor, et bibendum arcu. Fusce sagittis viverra mi volutpat interdum. Aliquam vestibulum, lorem ut ultricies mollis, augue felis pharetra urna, id dignissim lectus lacus non arcu. Nullam lectus justo, rhoncus et elementum quis, pellentesque vitae nisi. Cras dapibus purus a sem condimentum vitae pharetra enim vulputate. Fusce vitae urna tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi nec erat eu odio fringilla tristique vel vitae ante. Aliquam aliquam, enim ut sagittis mollis, est dui adipiscing leo, ac rhoncus nibh est eu ligula. Phasellus fringilla luctus dui, eget iaculis turpis eleifend vitae. Maecenas justo sem, eleifend et tristique ac, porta non nunc. Morbi nulla mauris, volutpat nec feugiat non, cursus dictum risus. Nullam lobortis viverra ipsum vel vehicula.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eleifend purus vitae diam iaculis quis sollicitudin felis venenatis. Pellentesque lacinia mauris at arcu posuere ultricies. Donec ornare ullamcorper neque sed laoreet. Donec pharetra eros dolor, et bibendum arcu. Fusce sagittis viverra mi volutpat interdum. Aliquam vestibulum, lorem ut ultricies mollis, augue felis pharetra urna, id dignissim lectus lacus non arcu. Nullam lectus justo, rhoncus et elementum quis, pellentesque vitae nisi. Cras dapibus purus a sem condimentum vitae pharetra enim vulputate. Fusce vitae urna tellus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi nec erat eu odio fringilla tristique vel vitae ante. Aliquam aliquam, enim ut sagittis mollis, est dui adipiscing leo, ac rhoncus nibh est eu ligula. Phasellus fringilla luctus dui, eget iaculis turpis eleifend vitae. Maecenas justo sem, eleifend et tristique ac, porta non nunc. Morbi nulla mauris, volutpat nec feugiat non, cursus dictum risus. Nullam lobortis viverra ipsum vel vehicula.</p>
</div>
</body>
[/html]