Beispiel für 'Fullscreen' site?

[gamp]

Hallo,
ich bin relativ neu bei Webdesign/CSS, wollte mir demnächst auch mal JavaScript ansehen.

Nun, ich habe mit Photoshop eine Website-Vorlage gebaut, relativ Simpel (in 3 Teile geteilt) -
- ein Header der 100% über die Breite geht (Background Image: 1px width, 150px height)
- Main Content/Frame (zwischen Header und Footer)
- ein Footer der 100% über die Breite geht (Background Image: 1px width, 150px height)

Im Anhang habe ich mal schnell ein Beispiel in Photoshop gemacht damit ihr seht wie das ganze in etwa aussieht, den Header (Orange, oben) habe ich auf 1x150px gesliced, den Footer ebenfalls.

Ich will nun den Header immer oben am Website-Rand kleben haben. Den Footer immer unten. Der Main-Container (In der Mitte) kriegt dann einen Frame verpasst in den ich Text ladet und ist in der Höhe dynamisch und passt sich je nach Bildschirmauflösung des Betrachters an.

Wie kann ich jetzt jedoch die Höhe des 'Main-Content'-Containers berechnen, so dass sie Dynamisch sich der Auflösung des jeweiligen Nutzers der wie Website besucht, anpasst?

Hier ist mal mein CSS Code den ich soweit hab (Ist bestimmt keine schicke Lösung, der 'Body'-Container verschwindet denke ich 'unter' dem Footer, wobei man dass nicht bemerkt.)

div.header {
	position: absolute;
	top: 0px;
	left: 0px;
	background-image: url(images/header.png);
	height: 152px;
	width: 100%;
}

div.body {
	position: absolute;
	top: 150px;
	left: 0px;
	background-color: #FFFFFF;
	height: 72%;
	width: 100%;
}

div.footer {
	position: absolute;
	left: 0px;
	bottom: 0px;
	background-image: url(images/footer.png);
	height: 151px;
	width: 100%;
}

div.logo {
	background-image: url(images/logo.png);
	width: 344px;
	height: 64px;
	margin-top: 40px;
}

Sieht bei meiner Auflösung von 1920x1080 schon relativ passabel aus mit dem CSS, jedoch liegen der Footer sowie auch der Header im IExplore nur links am Rand an, nicht jedoch rechts (obwohl ich 100% width gewählt habe).

Ok, lange rede kurzer Sinn, hat jemand ein Beispiel/Tutorial für eine 'Fixed-Height' (Fullscreen) Website wie ich sie bauen will? Oder einen Tipp wie ich das besser machen kann? Irgendwie hab ich im Gefühl das mein CSS Code ordentlicher Anfängermist ist ;-)

Danke schonmal!

G

 

[_Alex_]

Hoi

Sorry, aber ich finde dies wenig sinnvoll. Damit wirst du nur zu kämpfen haben Hab mal kurz auch eine Full-Screen Seite erstellt, funktioniert mit dem Firefox einwandfrei, mit dem Internet Explorer nicht (wie fast immer^^).

Ausserdem, wenn du zu viel Text hast, dann wird er

a) unterhalb des footers wieder erscheinen, was einen scrollbalken verursacht und scheusslich aussieht
b) oder im Body-Bereich (also in der Mitte) einen Scrollbalken "provozieren". Der überschüssige Text kann ja nicht einfach so verschwinden

 

[_Alex_]

p.s. vlt hilft dir das auch weiter:

http://www.tutorials.de/css/371109-fullscreen-css-page-mit-zentrierung-u-rand.html

 

[gamp]

Danke für die Antworten,

'Zuviel Text' wird kein Problem sein, da nur eine fixed height/width Tabelle reinkommt mit einer Searchbar darüber und eventuell 'Pages 1 Page 2' etc. bei zuvielen Resultaten nach Suche.

Den Link check ich jetzt mal aus!
EDIT:
Hab ich gestern Nacht bereits durchgelesen, allerdings trifft das nicht so 100%ig auf mein Problem zu soweit ich das verstanden hab.

Dafür hab ich das hier gefunden, ein 'Resize' event bei JavaScript der dann die Height/Width anpasst:
http://particletree.com/examples/dynamiclayouts/

Muss mir jedoch erstmal JavaScript/JQuery besser anschaun da ich ja wie gesagt noch relativ neu bin in der Scene!

 

[gamp]

Hab mich sosehr in CSS und DIV Container verliebt das ich die gute alte Tabelle völlig ausser acht gelassen hab!

Hab einfach eine 3 Zeilige Tabelle mit CSS über den kompletten Bildschirm gespannt wobei die mittlere <td> keine festgelegte Höhe hat (dynamisch ist).

Scheint bisher ganz gut zu klappen! Falls noch Probleme auftreten geb ich bescheid.

Bisher auf jedenfall der einfachste/beste Lösungsansatz den ich ausprobiert habe.